使用CSS / HTML更改悬停时的图片 [英] Changing image on hover with 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更改悬停时的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！