我有这个问题,我设置了一个图像显示另一个图像时,鼠标悬停在上面,但第一个图像仍然出现,新的一个不会改变高度和宽度和重叠的另一个。我还是相当新的HTML / CSS,所以我可能错过了一些简单的东西。这里是代码:
@H_404_2@<img src="LibraryTransparent.png" id="Library">
@H_404_2@#Library {
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}
解决方法
一个解决方案是使用第一个图像作为背景图像像这样:
@H_404_2@<div id="Library"></div>
@H_404_2@#Library {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
}
如果您的过度图片大小不同,则必须进行如下设置:
@H_404_2@#Library:hover { background-image: url('LibraryHoverTrans.png'); width: [IMAGE_WIDTH_IN_PIXELS]px; height: [IMAGE_HEIGHT_IN_PIXELS]px; }