css - 如何仅使用 CSS 在悬停时进行无闪烁图像切换？

Question

代码如下:

<div id="compv-navbar">
        <a href="#"><img src="image1.png" id="icon1"></a> | 
        <a href="#"><img src="image2.png" id="icon2"></a> | 
        <a href="#"><img src="image3.png" id="icon3"></a> | 
        <span id="view_name"> Random Text</span>
 </div>

假设每个图像都有另一个后缀为“-hover”的图像，该图像将在悬停时被替换。

Answer 1

这是我会做的:

<div id="compv-navbar">
        <a href="#" id="icon1"></a> | 
        <a href="#" id="icon2"></a> | 
        <a href="#" id="icon3"></a> | 
        <span id="view_name"> Random Text</span>
</div>

a#icon1{
background:url("image1.png") no-repeat;
}
a:hover#icon1{
background:url("image1-hover.png") no-repeat;
}
a#icon2{
background:url("image2.png") no-repeat;
}
a:hover#icon2{
background:url("image2-hover.png") no-repeat;
}
a#icon3{
background:url("image3.png") no-repeat;
}
a:hover#icon3{
background:url("image3-hover.png") no-repeat;
}