我有这个问题，我设置了一个图像显示另一个图像时，鼠标悬停在上面，但第一个图像仍然出现，新的一个不会改变高度和宽度和重叠的另一个。我还是相当新的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;
}
