javascript - 如何在父元素上使用 :visited？

Question

我基本上有一个内容列表，所有内容都指向外部 url（它在新窗口中打开它们）。截至目前，我将 a:visited 设置为灰色，尽管我真正喜欢的是整个列表项（其中包含他们单击的锚链接）具有降低的不透明度。

你可以在 reddit 上看到这种行为。

比如说你有

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

然后你有很多行.item

我想要它，以便当您单击链接时，整个 div 可以“看到” :visited 状态，因此.item设置为opacity: .5;，而不仅仅是文本变灰。

有没有办法用 JS 或 css 做到这一点？

score 2 · Accepted Answer

这并不完全是解决您的技术问题的方法，但是否有可能改变您的结构以<a>完成<div>父母的风格需求？

换句话说，杀死<div>，然后使用<a>. 这样，当它被“访问”时，你可以对它做任何你想做的事情。

score 1 · Accepted Answer

:visitedjQuery 中似乎没有选择器。查看此插件以包含它： http ://remysharp.com/2008/02/25/visited-plugin/

使用此插件，您可以使用以下任一方法实现此效果：

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

或这个：

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

score 0 · Accepted Answer

一旦支持CSS4 选择器（假设当前草案以类似于其当前形式的方式被接受），

div.item! > a:visited

将选择具有访问div类的父级。itema

在那之前，cssParentSelector可能会起作用。

3 回答 3