html - 使用 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

另一种选择是使用 JS:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />