如何使用 jQuery 向元素添加伪类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12740967/
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
How do you add pseudo classes to elements using jQuery?
提问by jay
In CSS, when you hover your mouse over an element, you can specify views for it using the :hover pseudo class:
在 CSS 中，当您将鼠标悬停在一个元素上时，您可以使用 :hover 伪类为其指定视图：
.element_class_name:hover {
/* stuff here */
}
How can you use jquery to add or "turn on" this pseudo class? Typically in jQuery if you want to add a class you would do:
如何使用 jquery 添加或“打开”这个伪类？通常在 jQuery 中，如果你想添加一个类，你会这样做：
$(this).addClass("class_name");
I have tried "hover" but this literally adds a class named "hover" to the element.
我尝试过“悬停”，但这实际上向元素添加了一个名为“悬停”的类。
If anyone knows what to write, please let me know! Thanks!
如果有人知道要写什么，请告诉我！谢谢！
回答by BoltClock
You can't force a certain pseudo-class to apply using jQuery. That's not how pseudo-classes (especially dynamic pseudo-classes) work, since they're designed to select based on information that cannot be expressed via the DOM (spec).
您不能使用 jQuery 强制应用某个伪类。这不是伪类（尤其是动态伪类）的工作方式，因为它们旨在根据无法通过 DOM ( spec)表达的信息进行选择。
You have to specify another class to use, then add that class using jQuery instead. Something like this:
您必须指定要使用的另一个类，然后改用 jQuery 添加该类。像这样的东西：
.element_class_name:hover, .element_class_name.jqhover {
/* stuff here */
}
$(this).addClass("jqhover");
Alternatively you could hunt for the .element_class_name:hoverrule and add that class using jQuery itself, without hardcoding it into your stylesheet. It's the same principle, though.
或者，您可以寻找.element_class_name:hover规则并使用 jQuery 本身添加该类，而无需将其硬编码到您的样式表中。不过原理是一样的。
回答by chanjarster
I think there is no way to do that with jQuery or javascript.
我认为使用 jQuery 或 javascript 无法做到这一点。
You can find the same answer in these two questions:
您可以在以下两个问题中找到相同的答案：
回答by I.Am.A.Guy
Make a div on the page
在页面上做一个div
<div id="Style">
<style>
.element_class_name:hover {
/* stuff here */
}
</style>
</div>
And then programmatically hardcode the style, i.e.,
然后以编程方式对样式进行硬编码，即，
$("#Style").find("style").prepend("#" + this.id + ":hover, ");
Unfortunately, the element you are calling this will have to have an id.
不幸的是，您调用的元素必须有一个 id。
$("body").children().click(function(){
$("#Style").find("style").prepend("#" + this.id + ":hover, ");
});/* demo */
* {
transition: opacity 1s;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="Style">
<style>
.element_class_name:hover {
opacity: 0 !important;
}
</style>
</div>
<button id="btn1">Add hover class here</button>
<button id="btn2">Add hover class here too</button>
<p id="Note">
To use this though, you'll have to assign an id to that particular element though.
</p>
</body>
</html>回答by Michael Artman
jQuery has a hover()function as seen here: https://www.w3schools.com/jquery/event_hover.asp
jQuery 具有hover()如下所示的功能：https: //www.w3schools.com/jquery/event_hover.asp
It's a pretty nice function for :hoverpollyfill.
这是:hoverpollyfill的一个非常好的功能。
$(selector).hover(inFunction,outFunction)
$(selector).hover(inFunction,outFunction)
