使用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 over 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更改悬停时的图片

相关推荐