使用 CSS/HTML 更改悬停图像

Changing image on hover with CSS/HTML(使用 CSS/HTML 更改悬停图像)

问题描述

我有这个问题，我设置了一个图像以在鼠标悬停时显示另一个图像，但是第一个图像仍然出现，新的图像不会改变高度和宽度并与另一个图像重叠.我对 HTML/CSS 还是很陌生，所以我可能错过了一些简单的东西.代码如下:

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm still pretty new to HTML/CSS so I may have missed something simple. Here is the code:

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

推荐答案

一种解决方案是同时使用第一张图片作为背景图片，如下所示:

One solution is to use also the first image as a background image like this:

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

如果您的悬停图像大小不同，您必须像这样设置它们:

If your hover image has a different size, you've got to set them like so:

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}

这篇关于使用 CSS/HTML 更改悬停图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！