css - 使用 :hover, :visited 和 :active 设置 4 个不同的 div 样式

Question

我希望有人能帮我解决这个问题。

我得到了这个 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>

我使用这样的背景图像来设计这些 div:

#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);
  }

我将鼠标悬停在新图像上是有效的。是否可以添加 :visited 和 :active 以便在单击/访问上一个链接/图像后永久显示新的(悬停)图像？

谢谢

---

jsfiddle.net/AcvbG - 现在可以使用颜色。奇怪的是没有背景图片..

我的目标是:当点击，悬停#leftbox时，背景图像必须更改为另一个，使用:visited，:hover和:active。

有人知道解决办法吗？或者我必须使用javascript(知识有限)谢谢大家

Answer 1

我不相信那些伪类会做你想做的事。
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.

如果您愿意使用 JavaScript，那么有一些选择。

编辑:

您可以设计您的<a>标签就像你的 div 一样，只需更改它们的背景即可。这是完全可行的。

http://jsfiddle.net/AcvbG/