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;
}

Answer 2

CSS并不意味着这样做，它控制演示，而不是文件的位置。如果你真的需要这个，那么这里有一点点解决方法它们应该可以工作（我还没有真正测试过这个）。

HTML

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

CSS

#icon1
{
    width:100px; /*Change this to your image width*/
    height:100px; /*Change this to your image width*/
    background-image:url("image1.png");
}

#icon1:hover
{
    width:100px; /*Change this to your image width*/
    height:100px; /*Change this to your image width*/
    background-image:url("image1-hover.png");
}

（确保为每张图片添加此内容。）

Answer 3

嗯，完全无闪烁的图像切换只能使用图像预加载。在任何其他情况下，浏览器仅在悬停时加载图片。我写了关于图像切换的a small example。

另一种解决方案是使用CSS sprites并使用background-position在悬停时切换图片。

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

3 个答案: