CSS 伪类与 jQuery

Question

我刚刚学了一点 jQuery，并尝试用它来实现简单的变色效果。 假设我有两个 >，#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 所做的就是将内联样式放入 #foo 内的 > 中，使它们变成 >，我想这会覆盖 :hover 伪类。 由于伪类的内联样式 attr 还没有被任何人实现，我怀疑我是否能得到我想要的效果......

仍然，有没有任何解决方案不需要我写类似的东西

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

？

谢谢。

Answer 1

摘自 Setting CSS Pseudo Class Rules From Javascript

您实际上可以更改悬停时或使用 :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;
});

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

Answer 2

!important 似乎使 css 属性比内联样式更强，至少在 Firefox 中是这样。 尝试将您的样式更改为如下所示：

#foo a:hover { color: black !important; }

Answer 3

也许您可以删除当您将鼠标悬停在链接上时添加的类，如下所示：

$('#bar').click(function() {
  $('#foo a').css('color', 'red');
});
$('#foo').hover() {
  
 [编辑]：您可能需要添加一个 IF 语句来首先查看该类是否存在。
#foo a').removeCss('color', 'red');
});

[编辑]：您可能需要添加一个 IF 语句来首先查看该类是否存在。

Answer 4

使用 Javascript 执行此操作的另一种令人讨厌的方法是清空容器元素并再次用内容填充它并再次设置单击事件。 这会破坏所有状态和事件，因此必须重新设置它们，但对于不包含大量数据的简单事物，它可以工作！

我将其用于使用 :hover 类的导航菜单。

$('#page_nav ul').click(clearNavMenu_Hover);

function clearNavMenu_Hover() {
    var tmpStore=$('#page_nav').html();
    $('#page_nav').empty();
    $('#page_nav').html(tmpStore);
    $('#page_nav ul').click(clearNavMenu_Hover);
}