html - 更改已访问链接的图像 src

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 的最佳和最简单的方法是什么？

score 4 · Accepted Answer

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

空无一人。图像的src属性超出了 CSS 的范围。

您将不得不使用background-image属性。

从理论上讲，您可以有两张图像并一次显示一张，然后在下一次使用时显示另一张display: none，但这非常笨拙，并且会导致两张图像都被加载。

score 3 · Accepted Answer

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

score 2 · Accepted Answer

您可以像这样更改图像的属性：

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

score 2 · Accepted Answer

Afaik，您不能仅使用 css 更改图像 src。

但是您可以将其设置为相同大小的背景图像，然后使用 :hover 类

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

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

顺便说一句，一个更漂亮的解决方案是使用相同的图像，包括两种状态，只是改变background-position. 这样负载就少了。如果您对更多内容感兴趣，请查找“css sprites”！

score 1 · Accepted Answer

css不能修改dom，我可以建议设置背景图片，然后隐藏img

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

5 回答 5