使用JS触发CSS的hover效果

Question

我想知道是否有可能通过JS触发CSS HOVER效果，而不必使用额外的类...

这是我要做的示例： http://jsfiddle.net/pXbMZ/2/

我已经尝试使用 mouseenter() 触发效果，但这不会触发CSS的hover效果。

附注：我做了一个帮助用户使用在线CMS的功能。这个帮助函数通过移动一个图像来向您展示如何使用功能。虚拟光标可以点击元素、显示元素等。但我也想让这个虚拟光标触发CSS中设置的:hover效果。

- meo

---

当我还是个孩子的时候，我也喜欢小熊维尼... :) - Jacob Relkin

对于那些不明白笑话的人，Tigger是小熊维尼中老虎的名字。 - Jacob Relkin

这个概念对我来说真的没有意义。你试图触发一个无效的状态。如果页面加载时用户的鼠标没有悬停在div上，那么你如何通过编程设置它呢？这两种状态是矛盾的。 - Josiah Ruddell

我想使用这个来模拟用户交互。我编写了一个函数来向用户展示该如何操作。为此，我有一个鼠标光标作为图像，在页面上移动时，当它悬停在链接上时，我希望触发CSS的hover效果。 - meo

真正的问题是：为什么你如此坚决地不按照正确的方式去做 - 即使用 addClass()？在设置悬停模式和添加类似悬停的类之间有什么区别？ - Spudley

Answer 1

我知道你想做什么，但为什么不直接这样做：

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

该类已经在您的CSS中被定义了...

至于您最初的问题，这个问题以前已经被问过了，但不幸的是不可能实现。 例如：http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

然而，如果您的样式表是在Javascript中定义的，那么您想要的功能可能是可以实现的。请参见：http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

希望这能帮到您！

- Nick G

Answer 2

您不能这样做。这不是一个受信任的事件。

由用户代理生成的事件（无论是作为用户交互的结果还是作为对DOM更改的直接结果）被用户代理视为可信事件，其特权不适用于通过DocumentEvent.createEvent("Event")方法生成的脚本事件，也不适用于通过Event.initEvent()方法修改或通过EventTarget.dispatchEvent()方法分派的事件。可信事件的isTrusted属性值为true，而不可信事件的isTrusted属性值为false。

大多数不受信任的事件不应触发默认操作，但click或DOMActivate事件是例外。

您需要手动添加类并在mouseover/mouseout事件中添加/删除它。

---

顺便提一下，我在将this标记为重复问题后才在这里回答，因为我没有看到任何答案真正涵盖了这个问题。希望有一天它会被合并。

- Benjamin Gruenbaum

Answer 3

我认为你所询问的不可能实现。

参见：使用JQuery悬停项目 基本上，根据我所知，添加类是唯一可以实现这一点的方法。

- brendan

---

谢谢，这实际上是对我的问题的第一个有帮助的回答或评论。 - meo

Answer 4

如果您在Jquery中将事件绑定到onmouseover和onmouseout事件，那么您可以使用mouseenter()触发该效果。

你想达到什么目的？

- DrewBowman

---

我已经编辑了我的帖子。我不想触发JS的mouseenter事件，我想触发CSS:hover。 - meo