Geek Answers Handbook

A: visited img {display: none; }

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 should be displayed only when the link has not yet been visited. If the link is visited, I will show: none;

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

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

But the image is still displayed. Testing border is red. If I changed: visited so that: hover over it as it should (: hover over and it disappeared). Firebus tells me that the image is "display: none", but apparently this is not ...

Does anyone know this problem and know a possible solution?

+8
html css
source share
2 answers

According to the documentation from Mozilla :

For privacy reasons, browsers strictly restrict the styles that you can apply using the 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 instead uses the no-visit rule (unless the opacity is 0, in which case all color is ignored, and one of the unvisited rules is used.

Although the color can be changed, the getComputedStyle method will lie and will always return the color value without visiting.

So you cannot change the display value. You can see here how it works with another post as border-color .

You will have to use a different approach like JavaScript + LocalStorage (mostly supported ).

A rude 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'); } }); });

Demo is here .

+11
source share

beacus :visited saved in browsers, so you can set a cookie for each <a> that clicked on javascript and hide the <img inside.

0
source share

More articles:


All Articles