What I'm trying to achieve here:
What I am getting instead is just a rollover state, no visited state.
http://codepen.io/Chris-Brennan/pen/eNaxQY?editors=110
.dwight:hover {
content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}
.dwight:visited {
content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}
<a class="dwight" href="#"><img src="http://s16.postimg.org/ph8f6jedt/print.png"/></a>
For privacy reasons, browsers strictly limit the styles you can apply using an element selected by :visited
-pseudo-class to the following CSS properties:
Note also that the alpha component will be ignored. The alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used.
https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector