Styling 4 different divs with :hover, :visited and :active

问题

I hope someone can help me out with this.

I got this HTML:

<a href="http://test"><div id="topleftbox"></div></a>
<a href="http://test"><div id="toprightbox"></div></a>
<a href="http://test"><div id="bottomleftbox"></div></a>
<a href="http://test"><div id="bottomrightbox"></div></a>

I style these divs with a background image like this:

#topleftbox {
  background: url(../img/images/layout_03.jpg);
  background-repeat: no-repeat;
  width: 229px;
  height: 228px;
  float: left;
  }

 #topleftbox:hover {
  background: url(../img/hoverimages/layout_03.jpg);
  }

My hover with the new image works. Is it possible to add :visited and :active so the new (hover) image is permanently showing after clicking/visiting the previous link/image?

Thanks

jsfiddle.net/AcvbG - This works now with colors. Strangely not with background images..

My goal is: When clicking,hovering the #leftbox the background image has to change to another, using :visited, :hover and :active.

Anyone knows the solution? Or do I have to use javascript (limited knowledge) Thanks guys

回答1:

I don't believe those pseudo-classes will do what you want.
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

The :visited pseudo-class applies once the link has been visited by the user.

~~If you are willing to use javascript, then there are some options.~~

EDIT:

You could potentially style your <a> tags to be like your divs, and just change their background. That is totally doable.

http://jsfiddle.net/AcvbG/

来源：https://stackoverflow.com/questions/15123505/styling-4-different-divs-with-hover-visited-and-active

标签

css

html

styling