如何使用 jQuery 访问 :hover 伪类？

Question

我有一个带有悬停伪类的 CSS 类：

.nav-collapse a:hover {
   background: #DEDEDE;
   border-radius: 3px;
}

我想用 jQuery 动态更改背景颜色，即访问 CSS 类 (.nav-collapse a:hover) 并更改背景颜色。我尝试了以下方法，但不起作用：

$(".nav-collapse a:hover").css({
      "background": "#000",
      "color": "#fff",
});

访问 CSS 类的 :hover 类的正确方法是什么？

Answer 1

如果您只是询问如何修改现有的包含动态伪类的 CSS 规则，那么 DOM 与 jQuery 交互是不可能的，因为 jQuery 处理的是 DOM 元素，而不是 CSS 规则——您需要修改而是直接文档样式表，这通常很麻烦。这适用于几乎所有动态伪类，而不仅仅是:hover。

一种更优雅的方法是将新样式声明移动到具有不同类名的单独 CSS 规则中，然后根据需要将该类应用于您的元素。这将您的样式声明与您的脚本分离，完全消除了从您的脚本中修改您的样式的需要。也就是说：

.nav-collapse a:hover {
   background: #DEDEDE;
   border-radius: 3px;
}

.nav-collapse a.scrolling:hover {
   background: #000;
   color: #fff;
}

还有：

$('.nav-collapse a').addClass('scrolling');

Answer 2

是这样的：

 $(".nav-collapse > a").mouseover(function(){
        $(this).css({
          "background": "#000",
          "color": "#fff",
        });
 })

 $(".nav-collapse > a").mouseout(function(){
        $(this).css({
          "background": "",
          "color": "",
        });
 })
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-collapse">
  <a href="#">link</a>
</div>