2

我刚刚学了一点 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 所做的是将内联样式放入<a#foo 中的 >s 中，使它们成为<a style="color:red;" href="...">，我想这将覆盖 :hover 伪类。由于任何人都没有实现伪类的内联样式 attr，所以我怀疑我是否能得到我想要的效果......

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

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

?

谢谢。

4

5 回答 5

6

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

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

于 2011-05-12T16:17:47.297 回答
3

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

#foo a:hover { color: black !important; }
于 2009-01-28T01:54:34.630 回答
2

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

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

于 2009-11-10T12:20:12.310 回答
1

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

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

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

于 2009-01-28T01:56:06.143 回答
0

使用 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);
}
于 2014-03-08T19:56:28.947 回答