我有这个问题,我设置了一个图像,当鼠标悬停在上面时显示另一个图像,但是第一个图像仍然出现,新的图像没有改变高度和宽度,并且与另一个图像重叠。我仍然是HTML/CSS的新手,所以我可能错过了一些简单的东西。代码如下:
<img src="LibraryTransparent.png" id="Library">
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}
发布于 2013-09-15 22:10:50
一种解决方案是使用第一个图像作为背景图像,如下所示:
<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;
}
发布于 2014-07-15 04:48:02
另一种选择是使用JS:
<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
发布于 2013-09-15 22:12:55
使用content
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
height: 70px;
width: 120px;
}
https://stackoverflow.com/questions/18813299
复制相似问题