Javascript 用 JS 触发 css 悬停

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4347116/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 12:01:13  来源:igfitidea点击:

Trigger css hover with JS

javascriptjquery

提问by meo

I would know if it is possible somehow to trigger the CSS HOVER effect with JS, without having to use a additional class...

我想知道是否有可能以某种方式用 JS 触发 CSS HOVER 效果,而不必使用额外的类......

Here is an example of what i want to do: http://jsfiddle.net/pXbMZ/2/

这是我想要做的一个例子:http: //jsfiddle.net/pXbMZ/2/

i have tried fireing the effect using mouseenter()but this does not trigger the CSS hover effect.

我曾尝试使用mouseenter()触发效果,但这不会触发 CSS 悬停效果。

PS: I have made a function that helps a user using a online CMS. The help function shows you how to do stuff by moving a image around that shows you how to use stuff. The virtual cursor can click stuff, show elements etc.. But i would like this virtual cursor to tigger the :hover effects set in the CSS as well.

PS:我做了一个功能,可以帮助用户使用在线 CMS。帮助功能通过移动显示如何使用东西的图像来向您展示如何做东西。虚拟光标可以点击东西,显示元素等。但我希望这个虚拟光标也能触发 CSS 中设置的 :hover 效果。

采纳答案by Nick G

I know what you're trying to do, but why not simply do this:

我知道你想做什么,但为什么不简单地这样做:

$('div').addClass('hover');

The class is already defined in your CSS...

该类已在您的 CSS 中定义...

As for you original question, this has been asked before and it is not possible unfortunately. e.g. http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

至于你原来的问题,这已经被问过了,不幸的是这是不可能的。例如http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

However, your desired functionality may be possible if your Stylesheet is defined in Javascript. see: http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

但是,如果您的样式表是在 Javascript 中定义的,则您想要的功能可能是可能的。见:http: //www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Hope this helps!

希望这可以帮助!

回答by Benjamin Gruenbaum

You can't. It's not a trusted event.

你不能。这不是可信事件

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events.

由用户代理生成的事件,无论是作为用户交互的结果,还是作为对 DOM 更改的直接结果,都被用户代理信任,并且具有脚本通过 DocumentEvent.createEvent 生成的事件所没有的特权("Event") 方法,使用 Event.initEvent() 方法修改,或通过 EventTarget.dispatchEvent() 方法调度。可信事件的 isTrusted 属性值为 true,而非可信事件的 isTrusted 属性值为 false。

大多数不受信任的事件不应触发默认操作,但单击或 DOMActivate 事件除外。

You have to add a class and add/remove that on the mouseover/mouseout events manually.

您必须添加一个类并手动在 mouseover/mouseout 事件上添加/删除它。



Side note, I'm answering this here after I marked thisas a duplicate since no answer here really covers the issue from what I see. Hopefully, one day it'll be merged.

侧面说明,我在这里我打上后回答这个这个作为一个重复,因为没有答案在这里真正覆盖问题,从我所看到的。希望有一天它会合并。

回答by brendan

I don't think what your asking is possible.

我不认为你的要求是可能的。

See: Hover Item with JQuery

请参阅:使用 JQuery 悬停项目

Basically, adding a class is the only way to accomplish this that I am aware of.

基本上,添加一个类是我所知道的实现此目的的唯一方法。

回答by DrewBowman

If you bind events to the onmouseover and onmouseout events in Jquery, you can then trigger that effect using mouseenter().

如果将事件绑定到 Jquery 中的 onmouseover 和 onmouseout 事件,则可以使用 mouseenter() 触发该效果。

What are you trying to accomplish?

你想达到什么目的?