How to style a div with background images using pseudoclasses :active :visited :hover?

Question

I got 4 divs and want to style them like this:

http://jsfiddle.net/AcvbG

HTML:

<a href="http://test" id="topleftbox"></a>

CSS:

#topleftbox {
  background: red;
  background-repeat: no-repeat;
  width: 229px;
  height: 228px;
  float: left;
  }

 #topleftbox:hover {
  background: blue;
  }

 #topleftbox:active {
  background: green;
  }

 #topleftbox:visited {
  background: yellow;
  }

But replace the colors with background images. The :hover works, but :visited and :actived arent taking effect.

Anyone knows the solution? I got limited knowledge in javascript so i hope there is a way to work around this.

Answer 1

Your :visited and :actived pseudo class wont be visible within jsFiddle since the href="http://test". So, you need to visit the page test to see :visited in action .. AND you need to be on test page to see :active in action.

Here i made a fiddle for you

You can see where .css differs

.topleftbox:hover {
    background: blue;
}
.topleftbox:visited {
    background: yellow;
}
.topleftbox:visited:hover {
    background: pink;
}
.topleftbox:active {
    background: green;
}

Also, you should give a check to the ORDER in witch you define your styling.

a:link { color: red } /* unvisited links */

a:visited { color: > blue } /* visited links */

a:hover { color: yellow } /* user hovers */

a:active { color: lime } /* active links */

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

An example of combining dynamic pseudo-classes:

a:focus { background: yellow } a:focus:hover { background: white }

The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.