如何解决使用CSS / HTML在悬停时更改图像
一种解决方案是将第一个图像也用作背景图像,如下所示:
<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;
}
解决方法
我有一个问题,我将一个图像设置为当鼠标悬停时显示另一个图像,但是第一个图像仍然出现,新的图像不会更改高度和宽度,而会与另一个图像重叠。我对HTML /
CSS还是很陌生,所以我可能错过了一些简单的东西。这是代码:
<img src="LibraryTransparent.png" id="Library">
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}