Question

我的HTML代码如下所示：

<article class="post">
  <a class="thumbnail" href="#">
    <img width="200" height="100" src="some.jpg" class="attachment-thumbnail">
  </a>
  <header>
    <h2 class="posttitle">
      <a href="#">Posttitle</a>
    </h2>
  </header>
</article>

当尚未访问链接时，仅需要显示第一个链接内的图像。如果访问了该链接，我将进行显示：无;

a:visited img {
  display: none !important;
  visibility: hidden !important;
  border: 1px solid red; * this is for testing*
}

http://jsfiddle.net/isherwood/rj394/2

但图像仍然显示。测试边框是红色的。如果我改变：访问到：悬停它会显示它应该显示（：悬停并且它已经消失）。 Firebus告诉我，图像是'display：none'，但显然不是......

有人知道这个问题并知道可能的解决方案吗？

Answer 1

根据Mozilla的文件：

出于隐私原因，浏览器严格限制您可以应用的样式   使用这个伪类选择的元素：只有颜色，   背景色，边框色，边框底色，   border-left-color，border-right-color，border-top-color，   outline-color，column-rule-color，fill和stroke。还请注意   alpha组件将被忽略：alpha组件   改为使用未访问的规则（不透明度为0时，in   那种情况下整个颜色被忽略了，而一个未被访问过   使用规则。

虽然颜色可以改变，但getComputedStyle方法会有所不同   并始终返回未访问颜色的值。

因此，您无法更改display值。您可以看到here如何使用不同的属性作为border-color。

您必须使用另一种方法作为JavaScript + LocalStorage（主要是supported）。

粗略解决方案可能是，使用jQuery：

$("a").on('click', function(){
    var $this = $(this);
    localStorage.setItem($this.attr('href'), true);
    $this.addClass('visited');
});

$( document ).ready(function() {
    $("a").each(function(index, elem){
        var item = $(elem);
        if (localStorage.getItem(item.attr('href'))){
            item.addClass('visited');
        }
    });
});

演示here。

Answer 2

因为:visited保存在浏览器中，所以您可以为javascript点击的每个<a>设置Cookie，并隐藏<img。

a：访问过img {display：none; }

2 个答案: