如何使用Javascript触发CSS“悬停状态”？ [复制]答案

【问题标题】：How to trigger CSS "hover state" using Javascript? [duplicate]如何使用Javascript触发CSS“悬停状态”？ [复制]
【发布时间】：2011-09-18 09:59:45
【问题描述】：

CSS 的“悬停状态”会在用户悬停在元素上时触发：

<style>
.element{

}
.element:hover{
    background-color:red;
}
</style>

我们如何使用 Javascript 将元素设置为“悬停状态”？

有可能吗？

【问题讨论】：

好像你拿一把锤子来粘看似不是钉子的东西。你到底想做什么？
想什么时候触发？？
@Balanivash：没关系。为什么他要自己触发悬停？为什么他不应该复制粘贴样式并使用 element.className = 'newClass'？
这是我的用例：我正在使用 DOM Mutation Observers 在 WebSockets 上镜像一个页面。 :hover 状态不在 DOM 中，因此需要其他通用方法来处理它。
@the_drow, 去stackoverflow.com/questions/1590831/…

【解决方案1】：

您最好将 :hover 样式复制到另一个类中，然后在您希望它们永久更改时将该类名称添加到元素中。伪类是“伪”是有原因的。

【讨论】：

这就是我现在正在做的事情，正在寻找更好的选择。
另外，哇。这是您正在从事的一项长期项目！ ;)
这不能解释。它引出了一个问题为什么悬停不是受信任的事件？
不是 W3C 的成员我只能冒险猜测，但 Smashing Magazine 上的这篇文章 (smashingmagazine.com/2013/11/12/an-introduction-to-dom-events) 提供了一点启示：据说一个事件是“可信的”当它源自设备本身，而不是从 JavaScript 中合成时。 您正在尝试模拟悬停事件，而不是自然触发它。当然，您可以模拟点击事件，而无需真正轻按鼠标按钮，因此这显然不是一个硬标准。显然，浏览器在点击时更宽容，但在悬停时则不然。
没错，允许我们称之为“焦点”而不是“悬停”似乎完全是武断的。

【解决方案2】：

如果您可以接受使用:focus 而不是悬停，您可以使用：

var links = document.getElementsByTagName('a');
links[0].focus();

或者

var linkToFocus = document.getElementById('link');
linkToFocus.focus();

显然，这种方法需要调整您的 CSS 以包含 a:focus 样式：

a:link, a:visited {
    background-color: #fff;
}
a:hover, a:focus, a:active {
    background-color: #f00;
}

【讨论】：

但是为什么要这样做呢？
@the_drow：我完全不知道；但我怀疑它是在页面加载时显示/突出显示某些内容，也许？当然，有更好的方法可以做到这一点，但没有更多信息，我只能尝试回答所提出的问题。遗憾的是，不管用例如何。
很好的答案，但问题是如何触发“:hover”，而不是“:focus”。
@the_drow：这在创建组件演示页面时可能很有用，您希望在其中以不同状态（中性、禁用、悬停、聚焦、活动）显示不同的按钮样式。