如何使用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");
});

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

Answer 3

我认为我遇到的最好的解决方案是在此stackoverflow上。 这段简短的jQuery代码使您所有的悬停效果都可以在单击或触摸时显示。.
无需在函数内添加任何内容。

$('body').on('touchstart', function() {});

希望这会有所帮助。