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

我想使我的链接在单击按钮时使用其伪类：hover。我试图触发诸如mousemove，mouseenter，hover等事件，但任何人都能工作。请注意，我想强制使用我的CSS伪类：hover规范，而不要使用类似以下内容的东西：

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

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

Answer 1

您将不得不使用一个类，但是不用担心，这很简单。首先，我们将为您分配:hover规则，使其不仅适用于物理悬停的链接，还适用于具有classname的链接hovered。

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

接下来，当您单击时#btn，我们将在.hovered上切换类#link。

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

如果链接已经具有该类，则将其删除。如果没有该类，则会添加它。