小编典典

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

html

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

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



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

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

阅读 369

收藏
2020-05-10

共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;
}
2020-05-10