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

这是：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何访问：使用jQuery悬停伪类？

2 个答案: