Question

我有一个包含多个条目的列表。

<ul>    
<li>
    <a href="http://url" title="The Title">
    <img src="/badge-unvisited.png" alt="" border="0" />
    </a>
</li>
<!-- etc. -->
</ul>

我不想使用jQuery，因此它只需要CSS。在访问图像时更改图像的src的最佳和最简单的方法是什么？

Answer 1

在访问图像时更改图像的src的最佳和最简单的方法是什么？

没有。图像的src属性超出了CSS的范围。

您必须使用background-image属性。

理论上你可以有两个图像，一次显示一个，另一个使用display: none显示，但这非常复杂，导致两个图像都被加载。

Answer 2

至少在Webkit和Firefox中，这是不可能的，因为访问链接的样式允许各种攻击场景。

Answer 3

您可以改变图像的属性，如下所示：

ul li a:visited img { border:10px }

但要改变源本身，你必须要有创意。用具有背景图像的元素替换图像，或者如果您不必支持旧版浏览器，则可以使用生成的内容，如下所示：

ul li a:after { content:url(image.gif); }

然后

ul li a:visited:after { content:url(image-2.gif); }

Answer 4

Afaik，你不能用css改变图像src。

但你可以把它变成一个相同大小的背景图像，然后使用：hover类，如

div {
    background-image:url(default.jpg);
}

div:visited {
    background-image:url(changed.jpg);
}

顺便说一句，更简单的解决方案是使用包含两种状态的相同图像，只需更改background-position即可。那样负载就会减少。如果你对更多的兴趣，请寻找'css sprites'！

Answer 5

css无法修改dom，我建议设置背景图片，然后隐藏img

a{background-image:url(badge-visited.png);width:50px;height:50px;}
a:visited img{display:none;}