使用 CSS/HTML 更改悬停时的图像 [英] Changing image on hover with CSS/HTML

问题描述

我遇到了这个问题，我设置了一个图像以在鼠标悬停时显示另一个图像，但是第一个图像仍然出现并且新的图像没有改变高度和宽度并与另一个重叠.我对 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;
}

这篇关于使用 CSS/HTML 更改悬停时的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！