使用以下方式设置4个不同的div：hover，：visited和：active

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 - 现在可以使用颜色。奇怪的是没有背景图片..

我的目标是：When clicking,hovering the #leftbox背景图片必须更改为另一个，使用：visited，：hover和：active。

有谁知道解决方案？或者我必须使用javascript（有限的知识）谢谢你们

Answer 1

我不相信那些伪类会做你想要的。
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

  

：激活元素时应用：active伪类   由用户。例如，在用户按下鼠标的时间之间   按钮并释放它。

     

：一旦用户访问了链接，就会应用：visited伪类。

如果你愿意使用javascript，那么有一些选择。

编辑：

您可能会将<a>标记设置为与您的div类似，只需更改其背景即可。这完全可行。

http://jsfiddle.net/AcvbG/