html - 如何使用伪类 :active :visited :hover? 为带有背景图像的 div 设置样式

Question

我有 4 个 div 并想像这样设置它们的样式:

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

但用背景图像替换颜色。 :hover 有效，但 :visited 和 :active 没有生效。

有人知道解决办法吗？我对 javascript 的了解有限，所以我希望有办法解决这个问题。

Answer 1

你的 :visited 和 :active 伪类不会在 jsFiddle 中可见，因为 href="http://test"。因此，您需要访问页面测试才能看到 :visited 的实际效果。并且您需要在测试页面上才能看到 :active 的实际效果。

在这里i made a fiddle为你

您可以看到 .css 的不同之处

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

此外，您应该检查您定义样式的 ORDER。

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.