a：已访问img {显示：无； } [英] a: visited img { display: none; }

问题描述

我的HTML代码如下：

My HTML code looks like this:

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

只有在尚未访问该链接的情况下，才需要显示第一个链接中的图像。如果访问了链接，我将显示：无；

The image inside the first link only need to be displayed, when the link isn't visited yet. If the link is visited, I'll do a display: none;

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

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

但是图像仍然显示。测试边界为红色。如果我将：visited更改为：hover，它将按原样显示（：hover，它消失了）。 Firebus告诉我，图像是显示：无，但显然不是...

But the image is still displayed. The testing-border is red. If I change :visited to :hover it does the display as it should (:hover and it's gone). Firebus tells me, that the image is 'display: none' but apparently it isn't...

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

Does someone know this problem and knows a possible solution?

推荐答案

根据 Mozilla ：

出于隐私原因，浏览器严格限制了您的样式可以使用此伪类选择的元素应用
：仅颜色，
背景色，border-color，border-bottom-color，
border-left-color，border-right颜色，边框顶部颜色，
轮廓颜色，列规则颜色，填充和描边。还要注意，
的alpha分量将被忽略：而是使用
未访问规则的alpha分量（除非不透明度为0，否则在
中将忽略整个颜色

For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used.

尽管颜色可以更改，但方法getComputedStyle将位于
，并且始终退还未访问的颜色的值。

Though the color can be changed, the method getComputedStyle will lie and always give back the value of the non-visited color.

因此，您不能更改显示值。您可以在此处看到与<$ c不同的属性的工作方式$ c>边框颜色。

So, you can't change the display value. You can see here as how is working with a different propery as border-color.

您将不得不使用另一种方法，例如JavaScript + LocalStorage（主要是受支持）。

You will have to use another approach as JavaScript + LocalStorage (mostly supported).

一种大致解决方案可能使用jQuery：

A roughly solution could be, using 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');
        }
    });
});

演示此处。

这篇关于a：已访问img {显示：无； }的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！