使用CSS/HTML更改悬停时的图片

前端之家收集整理的这篇文章主要介绍了使用CSS/HTML更改悬停时的图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个问题,我设置了一个图像显示另一个图像时,鼠标悬停在上面,但第一个图像仍然出现,新的一个不会改变高度和宽度和重叠的另一个。我还是相当新的HTML / CSS,所以我可能错过了一些简单的东西。这里是代码
<img src="LibraryTransparent.png" id="Library">
#Library {
    height: 70px;
    width: 120px;
}

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

解决方法

一个解决方案是使用第一个图像作为背景图像像这样:
<div id="Library"></div>
#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

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

如果您的过度图片大小不同,则必须进行如下设置:

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

猜你在找的CSS相关文章