使用 jQuery 的 CSS 伪类答案

【问题标题】：CSS Pseudo-classes with jQuery使用 jQuery 的 CSS 伪类
【发布时间】：2010-10-03 22:10:19
【问题描述】：

我刚刚学了一点 jQuery，并试图用它来实现简单的变色效果。假设我有两个<div>，#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 中的 <a>s，使它们成为 <a style="color:red;" href="...">，我想这将覆盖 :hover 伪类。由于任何 afaik 都没有实现伪类的内联样式 attr，我怀疑我是否能得到我想要的效果......

不过，有没有不需要我写类似的解决方案

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

?

谢谢。

【问题讨论】：

这个问题确实应该得到更好的答案，因为标题和接受的答案不匹配。

标签： jquery css pseudo-class

【解决方案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;
});

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

太棒了，它适用于 IE7 和 Chrome。尚未安装 FF，但我认为它适用于您所说的 FF。非常感谢。

【解决方案3】：

AFAIK，jQuery 不能设置伪类。但是，还有另一种方式：

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

【讨论】：

【解决方案4】：

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

$('#bar').click(function() {
  $('#foo a').css('color', 'red');
});
$('#foo').hover() {
  $'#foo a').removeCss('color', 'red');
});

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

【讨论】：

感谢我的朋友，che 的解决方案有效，但在我看到你和他的答案之前，我试图按照你说的做 :)

【解决方案5】：

使用 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);
}

【讨论】：