jquery - 如何访问:hover pseudo class with jQuery?

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 接口(interface)是不可能的，因为 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');