Question

I basically have a listing of content, which all goes to external url’s (it opens them in new windows). As of right now, i have a:visited set to gray, although what i would REALLY love is for the whole list item (which contains the anchor link they click on) to have a reduced opacity.

You can see this behavior on reddit.

Say for example you have

<div class="item">
  <a href="http://google.com">Click me</a>
</div>

And then you have many rows of .item

I want it so that when you click on the link, the entire div can ‘see’ the :visited state, and so .item gets set to opacity: .5;, as opposed to just the text turning gray.

Is there a way to do this with JS or css?

Answer 1

It appears there isn’t a :visited selector in jQuery. Check out this plugin for including it:
http://remysharp.com/2008/02/25/visited-plugin/

Using this plugin, you can implement this effect using either this:

$("a").visited().each(function() {
    $(this).parent().css("opacity", "0.5");
});

or this:

$(".item").filter(function() {
    return $(this).find("a").visited().length;
}).css("opacity", "0.5");