Question

I have a list with several entries.

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

I don’t want to use jQuery, so it needs to be CSS-only.
What is the best and easiest way to change the src of the image when it was visited?

Answer 1

Afaik, you can’t change the image src just with css.

But you could just make it a background-image of a same-sized and then use the :hover class like

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

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

Btw an even niftier solution would be to use the same image including both states and just changing the background-position. That way there’s less load. Look for ‘css sprites’ if you are interested in more!