Question

我有一个链接，我想在mouseover上添加类似如下：

$("#navbarlarge").on("mouseover","a",function(){
                $(this).addClass("linkeffect");
})

问题是我还想在链接中的:: before和:: after伪元素中添加一个类，试过这个但是不起作用：

$(this).find("::before").addClass("beforeeffect");

如何将此选择器与伪元素组合？

Answer 1

你不能。伪元素不能由JavaScript选择，因此jQuery也无法选择。

将类附加到元素本身，并使用#navbarlarge a ... waitaminute。

应用CSS

完全使用jQuery进行分配。

#navbarlarge a:hover {
    /* styles to apply to hovered link */
}
#navbarlarge a:hover::before {
    /* styles to apply to hovered link before pseudo */
}
#navbarlarge a:hover::after {
    /* styles to apply to hovered link after pseudo */
}

Answer 2

不知道这是否会有所帮助，它会做同样的事情，你可以根据需要调整范围。尝试了一段时间，我发现的唯一另一种方式就是任何警察都在这个线程SO Manipulating psuedo elems中直接添加一个样式，我从评论中看到有一个帖子在这个帖子上发布但它不是' t出现了，所以不确定它是否是同一个。

$( "a" ).hover(
  function() {
    $( this ).append( $( "<span>>>></span>" ) );
    $( this ).prepend( $( "<span><<<</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
    $( this ).find( "span:first" ).remove();
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">Hover Me</a>
<a href="#">Hover Me</a>

jQuery $（this）伪选择器

2 个答案: