Question

我刚刚学会了一点jQuery，并试图将它用于简单的变色效果。假设我有两个<div＆gt; 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：悬停颜色会丢失，即当用户将光标移动到链接时，它们将保持红色，而不是像我预期的那样变黑。

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

仍然，是否有任何解决方案不需要我写

之类的东西

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

感谢。

Answer 1

摘自Setting CSS Pseudo Class Rules From Javascript

你实际上可以在悬停时改变一个类的值，或者使用：j之后更改你想要的伪类：

$(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

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

使用jQuery的CSS伪类

5 个答案: