CSS 伪类 jQuery

Question

我刚刚学到一点 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 颜色不变，所以我这样写我的function：

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

问题是，虽然这个 function 确实将所有链接都变成了红色，但 a:hover 颜色丢失了，即当用户将 cursor 移到链接上时，它们将保持红色，而不是像我预期的那样变成黑色。

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

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

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

？

谢谢。

Answer 1

从Javascript设置CSS伪类规则中提取

实际上，您可以在悬停时使用以下内容更改类的值：使用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

！重要似乎使css属性强于内联样式，至少在Firefox中如此。 尝试将您的样式更改为以下内容：

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

Answer 3

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

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

Answer 4

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

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

[编辑]：你可能需要添加一个IF语句来查看该类是否在那里。

Answer 5

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

我将它用于使用：hover类的Nav菜单。

$('#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);
}