我有一个问题,我将一个图像设置为当鼠标悬停时显示另一个图像,但是第一个图像仍然出现,新的图像不会更改高度和宽度,而会与另一个图像重叠。我对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; }