0

我有 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 和 :actived 没有生效。

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

4

2 回答 2

2

由于 href="http://test"，您的 :visited 和 :actived 伪类在 jsFiddle 中不可见。因此，您需要访问页面测试以查看 :visited in action .. 并且您需要在测试页面上查看 :active 实际操作。

在这里我为你做了一个小提琴

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

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

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

a:link { color: red } /* 未访问的链接 */

a:visited { color: > blue } /* 访问过的链接 */

a:hover { color: yellow } /* 用户悬停 */

a:active { color:lime } /* 活动链接 */

注意 A:hover 必须放在 A:link 和 A:visited 规则之后，否则级联规则将隐藏 A:hover 规则的 'color' 属性。同样，因为 A:active 放置在 A:hover 之后，所以当用户激活并将鼠标悬停在 A 元素上时，将应用活动颜色（石灰）。

一个结合动态伪类的例子：

a:focus { 背景：黄色 } a:focus:hover { 背景：白色 }

最后一个选择器匹配伪类 :focus 和伪类 :hover 中的 A 元素。

于 2013-02-28T17:22:55.570 回答
0

在现代浏览器中，CSS 可以在不使用 javascript 的情况下处理您想要的内容。

http://jsfiddle.net/CWkdY/10/

需要注意的一件事是，您的标识符可以通过在您的 id 声明前添加“a”来识别您的 ID 是一个链接。您的初始定义也将受益于“显示：块”。像这样：

a#topleftbox {
  background: url('http://d241yswl6yg9sc.cloudfront.net/linen-texture2/top-new.jpg');
  width: 229px;
  height: 228px;
  float: left;
  display:block;
  }

如果您发现您的图像最初没有显示，请尝试使用这个小技巧缓存您需要使用的所有图像。你有一个包含所有图像的 div，在侧面，但隐藏。

http://perishablepress.com/css-image-caching/

于 2013-02-28T17:41:30.160 回答