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

Posted 2023-03-06

【中文标题】如何使用 jQuery 强制悬停状态？

【英文标题】：How to force a hover state with jQuery?

【发布时间】：2011-01-18 10:47:16

【问题描述】：

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

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

【参考方案1】：

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

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

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

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

如果链接已经有类，它将被删除。如果没有类，就会被添加。

【讨论】：

#jonathan 工作正常。有没有其他方法可以在不添加 a.hovered 的情况下实现相同的功能。

@ArulSidthan 查看 Mike 的答案。触发“鼠标悬停”而不是“悬停”可以满足您的要求。

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

注意：对我来说，这个解决方案只有在我复制没有 a:focus 的 CSS 定义时才有效。

【参考方案2】：

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

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

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

【讨论】：

fwiw，我发现如果 :hover 的样式规则指定了背景图像，这将不会加载图像。

鼠标悬停与 CSS :hover 不同。所以这行不通。它只能在鼠标悬停事件被绑定在某物上的情况下工作。

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

我认为这种方法比上面的方法更好，因为它不需要添加另一个类来更改元素样式。

【参考方案3】：

我认为我遇到的最佳解决方案是***。 这段简短的 jQuery 代码允许您在点击或触摸时显示所有悬停效果.. 无需在函数中添加任何内容。

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

希望这会有所帮助。