如何用伪类来样式元素:访问一个图像？

Question

我在这里想要达到的目标是：

1. 我想要一个橙色的方格(打印)作为未触及的状态。
2. 翻滚时，我希望女孩的形象出现。
3. 点击后，我希望女孩的形象保持访问状态。

相反，我得到的只是一个滚动状态，没有访问状态。

http://codepen.io/Chris-Brennan/pen/eNaxQY?editors=110

​

.dwight:hover {
  content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}
.dwight:visited {
  content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}

<a class="dwight" href="#"><img src="http://s16.postimg.org/ph8f6jedt/print.png"/></a>

​

Answer 1

出于隐私原因，浏览器严格限制可以使用:visited-伪类选择的元素应用于下列CSS属性的样式：

• 颜色
• 背景颜色
• 边框颜色
• 边框底色
• 左边框颜色
• 边框-右颜色
• 边框-顶部颜色
• 轮廓-颜色
• 柱规则颜色
• 填充
• 卒中

还请注意，alpha组件将被忽略。取而代之的是未访问规则的alpha组件(除非透明度为0，在这种情况下，整个颜色将被忽略，而未访问规则中的一个则被使用。)

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

selector