使用 CSS/HTML 更改悬停图像

2022-01-22 00:00:00 image hover html css

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

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm still pretty new to HTML/CSS so I may have missed something simple. Here is the code:

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


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

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

推荐答案

一种解决方案是同时使用第一张图片作为背景图片，如下所示:

One solution is to use also the first image as a background image like this:

<div id="Library"></div>


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

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

如果您的悬停图像大小不同，您必须像这样设置它们:

If your hover image has a different size, you've got to set them like so:

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}

相关文章