CODEWITHSUNDEEP
htmlcssimagepseudo-classrollover
Chris Brennan
Chris Brennan

Reputation: 191

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>

Upvotes: 3

Views: 96

Answers (1)

Axel
Axel

Reputation: 3323

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

Upvotes: 3

Related Questions