使用CSS / HTML在悬停时更改图像

Question

我有一个问题，我将一个图像设置为当鼠标悬停时显示另一个图像，但是第一个图像仍然出现，新的图像不会更改高度和宽度，而会与另一个图像重叠。我对HTML /
CSS还是很陌生，所以我可能错过了一些简单的东西。这是代码：

<img src="LibraryTransparent.png" id="Library">



#Library {
    height: 70px;
    width: 120px;
}

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

Answer 1

一种解决方案是将第一个图像也用作背景图像，如下所示：

<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;
}