如何使用jQuery强制悬停状态？

Question

请考虑这个CSS代码:

a { color: #ffcc00; }
a:hover { color: #ccff00; }

这个HTML代码:

<a href="#" id="link">Link</a>
<button id="btn">Click here</button>

最后,这个JS代码:

$("#btn").click(function() {
   $("#link").trigger("hover");
});

我想让我的链接使用其伪类:单击按钮时悬停.我试图触发像mousemove,mouseenter,hover等事件,但任何人都可以.请注意,我想强制使用我的CSS伪类:悬停规范,而不是使用类似的东西:

$("#link").css("color", "ccff00");

有人知道我该怎么做？非常感谢.

Answer 1

你将不得不使用一个类,但不要担心,这很简单.首先,我们将您的:hover规则分配给不仅适用于物理上悬停的链接,还适用于具有类名的链接hovered.

a:hover, a.hovered { color: #ccff00; }

接下来,当您单击时#btn,我们将切换.hovered该类#link.

$("#btn").click(function() {
   $("#link").toggleClass("hovered");
});

如果链接已经有类,它将被删除.如果没有该类,则会添加该类.

Answer 2

此外,您可以尝试触发鼠标悬停.

$("#btn").click(function() {
   $("#link").trigger("mouseover");
});

不确定这是否适用于您的特定情况,但我已成功触发鼠标悬停而不是悬停在各种情况下.