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

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

解决方法

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

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

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

猜你在找的CSS相关文章