How to style element with pseudoclass ":visited" with an image?

Question

What I'm trying to achieve here:

1. I want an orange square w/"print" as the untouched state.
2. When rolled over I want the girl image to appear.
3. After clicked on I want the girl image to remain as the visited state.

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>

Answer 1

For privacy reasons, browsers strictly limit the styles you can apply using an element selected by :visited-pseudo-class to the following CSS properties:

• color
• background-color
• border-color
• border-bottom-color
• border-left-color
• border-right-color
• border-top-color
• outline-color
• column-rule-color
• fill
• stroke

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