如何使用pseudoclass设置元素样式＆＃34;：visited＆＃34;有图像？

Question

我想在这里实现的目标：

1. 我想要一个橙色正方形w /＆＃34; print＆＃34;作为未受影响的国家。
2. 翻身时我希望女孩形象出现。
3. 点击后，我希望女孩形象保持为访问状态。

我得到的只是翻转状态，没有访问状态。

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

＆＃13;
＆＃13;
.dwight:hover {
  content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}
.dwight:visited {
  content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}
＆＃13;
<a class="dwight" href="#"><img src="http://s16.postimg.org/ph8f6jedt/print.png"/></a>
＆＃13;
＆＃13;
＆＃13;

Answer 1

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

• 颜色
• 背景颜色
• 边框颜色
• 下边框色
• 左边框颜色
• 右边框颜色
• 边框顶色
• 轮廓色
• 列规则色
• 填
• 中风

另请注意，alpha组件将被忽略。替代使用未访问规则的alpha分量（除非不透明度为0，在这种情况下，将忽略整个颜色，并使用未访问规则之一。

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

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

我自己也有类似的问题。 ：）