CSS 伪类与 jQuery

我刚刚学了一点 jQuery，并尝试用它来实现简单的变色效果。假设我有两个<div>s、#foo 和#bar。 #foo 有很多 URL，并且定义了以下 CSS：

#foo a {color: blue; border-bottom: 1px dashed blue}
#foo a:hover {color: black; border-bottom: 1px solid black}

现在我想在用户单击 #bar 时更改 #foo 中链接 (a:link) 的颜色，但保持 a:hover 颜色不变，所以我这样编写函数：

//...
$("#bar").click(function () {
  $("#foo a").css("color", "red");
});
//...

问题是，虽然此函数确实将所有链接更改为红色，但 a:hover 颜色丢失，即当用户将光标移动到链接上时，它们将保持红色，而不是像我预期的那样变成黑色。

因为我看到 jQuery 所做的就是将内联样式添加到<a#foo 内的 >s，使它们变成<a style="color:red;" href="...">，我想这会覆盖 :hover 伪类。由于伪类的内联样式 attr 还没有被任何人实现，我怀疑我是否能得到我想要的效果......

不过，是否有任何解决方案不需要我写类似的内容

$("#foo a").hover(
    function(){ $(this).css("color", "black");},
    function(){ $(this).css("color", "blue");}
)

?

thanks.

摘自从 Javascript 设置 CSS 伪类规则

实际上，您可以在悬停时或使用 :after 或任何您想要的 javascript 伪类来更改类的值：

$(document).ready(function()
{
    var left = (($('.selected').width() - 7) / 2) + 'px';
    document.styleSheets[1].insertRule('.selected:after { left: ' + left + '; }', 0);
    document.styleSheets[0].cssRules[0].style.left = left;
});

我希望这对任何人都有帮助。