htmlcssimagepseudo-classrollover

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


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>


Solution

  • 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