jQuery 带有 jQuery 的 CSS 伪类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/486159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Pseudo-classes with jQuery
提问by Metaphox
I've just learnt a bit jQuery, and am trying to use it for a simple color-changing effect. Let's say I have two <div>s, #foo and #bar. #foo has a lot of URLs, and has the following CSS defined:
我刚刚学习了一点 jQuery，并试图将它用于简单的变色效果。假设我有两个<div>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}
now I would like to change the color of the links (a:link) in #foo when the user clicks #bar, but keep the a:hover color untouched, so I write my function like this:
现在我想在用户单击 #bar 时更改 #foo 中链接（a:link）的颜色，但保持 a:hover 颜色不变，所以我这样写我的函数：
//...
$("#bar").click(function () {
$("#foo a").css("color", "red");
});
//...
The problem is, while this function does change all the links into red, the a:hover color is lost, i.e. when a user moves the cursor on to the links, they will stay red, not turn black as I expected.
问题是，虽然此功能确实将所有链接更改为红色，但 a:hover 颜色丢失了，即当用户将光标移到链接上时，它们将保持红色，而不是像我预期的那样变黑。
Since I see what jQuery does is put an inline style to <a>s within #foo, makes them into <a style="color:red;" href="...">, I guess this will overwrite the :hover pseudo-class. As the inline style attr for pseudo-class has not been implemented by anyone afaik, I doubt if I can get my intended effect at all...
因为我看到 jQuery 所做的是<a在 #foo 中为>s放置一个内联样式，使它们变成<a style="color:red;" href="...">，我想这会覆盖 :hover 伪类。由于伪类的内联样式 attr 还没有被任何人实现，我怀疑我是否能达到预期的效果......
still, is there any solutions that do not require me to write something like
仍然，是否有任何解决方案不需要我写类似的东西
$("#foo a").hover(
function(){ $(this).css("color", "black");},
function(){ $(this).css("color", "blue");}
)
?
?
thanks.
谢谢。
回答by David Diez
Extracted from Setting CSS Pseudo Class Rules From Javascript
You actually can change the value of a class on hover or with :after or whatever pseudo-class you want with 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;
});
I hope this helps anyone.
我希望这可以帮助任何人。
回答by che
!important seems to make css property stronger than inline style, at least in Firefox. Try to change your styles to something like this:
!important 似乎使 css 属性比内联样式更强，至少在 Firefox 中是这样。尝试将您的样式更改为如下所示：
#foo a:hover { color: black !important; }
回答by SlappyTheFish
AFAIK, jQuery can't set pseudo classes. However, there's another way:
AFAIK，jQuery 不能设置伪类。然而，还有另一种方式：
http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/
http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/
回答by BBetances
Maybe you could remove the class you added when you hover over the links, like this:
也许您可以在将鼠标悬停在链接上时删除添加的类，如下所示：
$('#bar').click(function() {
$('#foo a').css('color', 'red');
});
$('#foo').hover() {
$'#foo a').removeCss('color', 'red');
});
[EDIT]: You may need to add an IF statement to see if the class is there in the first place.
[编辑]：您可能首先需要添加 IF 语句以查看该类是否存在。
回答by Jamie Dean
Another nasty way of doing it using Javascript is to empty the container element and populate it again with the contents and setup the click event again. This destroys all states and events so they have to be setup again but for simple things that dont contain masses of data it works!
使用 Javascript 执行此操作的另一种讨厌的方法是清空容器元素并再次使用内容填充它并再次设置单击事件。这会破坏所有状态和事件，因此必须再次设置它们，但对于不包含大量数据的简单事物，它可以工作！
I use this for Nav menu's that use the :hover class.
我将它用于使用 :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);
}
