使用 :hover、:visited 和 :active 设计 4 个不同的 div [英] Styling 4 different divs with :hover, :visited and :active

问题描述

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

I hope someone can help me out with this.

我得到了这个 HTML:

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>

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

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

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

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?

谢谢

jsfiddle.net/AcvbG - 现在适用于颜色.奇怪的是没有背景图片..

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

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

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

有人知道解决办法吗?还是我必须使用javascript(知识有限)谢谢大家

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

推荐答案

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

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

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.

:visited 伪类在用户访问过链接后应用.

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

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

您可以将 <a> 标签的样式设置为类似于您的 div，只需更改它们的背景即可.这是完全可行的.

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/

这篇关于使用 :hover、:visited 和 :active 设计 4 个不同的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！