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

70

请考虑以下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");

有人知道我该怎么做？十分感谢。

jquery css

— 麦卡迪纳尔
source

116

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

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

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

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

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

— 桑普森
source

#jonathan工作正常。有没有其他方法可以实现相同而无需添加a.hovered。

— Arul Sidthan

@ArulSidthan查看Mike的答案。触发“鼠标悬停”而不是“悬停”就可以了。

— andyzinsser 2015年

担心重复，没有考虑这个解决方案。谢谢！

— Zachary Dahan 2015年

注意：对我来说，此解决方案仅在我复制CSS定义但不包含CSS定义时才有效a:focus。

— TheKarateKid

33

另外，您可以尝试触发鼠标悬停。

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

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

— 麦克风
source

5

首先，我发现如果有：hover的样式规则指定背景图像，则不会加载图像。

— Jon z

13

mouseover与CSS：hover不同。所以这行不通。它仅在鼠标悬停事件已绑定到某物的情况下才起作用。

— Kushagra Gour 2013年

有趣的是，我一直尝试使用不同的方法来添加类，但这确实解决了我的问题……在某些情况下它是有用的答案。

— joshua 2014年

我认为此方法比上面的方法更好，因为它不需要添加其他类来更改元素样式。

— Digggid

0

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

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

希望这可以帮助。

— Digggid
source