如何使用Javascript触发CSS的“hover状态”？

Question

CSS的“hovered state”会在用户将鼠标悬停在元素上时触发：

<style>
.element{

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

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

这是否可能？

- Pacerier

---

@Balanivash：算了吧。他为什么要触发hover？他为什么不复制样式并使用element.className = 'newClass'呢？ - the_drow

这是我的使用情况：我正在使用DOM突变观察器通过WebSockets镜像页面。:hover 状态不在DOM中，因此需要其他通用方式来处理它。 翻译后的内容： 这是我的应用场景：我正在使用DOM Mutation Observers通过WebSockets镜像一个页面。由于:hover状态不在DOM中，因此需要其他通用方式来处理它。 - Tamlyn

@the_drow，请访问https://dev59.com/qXI-5IYBdhLWcg3w99kH＃comment-11386801 - Pacerier

@Balanivash，我想使用Javascript在某个与用户输入无关的事件上触发它。 这可以是定时事件或完全不同的其他事件。 - Pacerier

@the_drow 我正在使用 https://github.com/studio-b12/tape-css 编写 CSS 单元测试。我遇到了完全相同的问题。 - tomekwi

Answer 1

如果您可以接受使用:focus而不是悬停（hover），那么您可以使用：

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

这里有一个JS Fiddle演示。

或者

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

JS Fiddle演示。

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

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

- David Thomas

---

但是为什么会有人这样做呢？ - the_drow

@the_drow：我完全不知道，但我猜测它可能是为了在页面加载时显示/突出某些内容？当然，有更好的方法来实现这一点，但没有进一步的信息，我只能尝试回答所提出的问题。无论用例如何，遗憾的是。 - David Thomas

好的回答，但问题要求如何触发“:hover”，而不是“:focus”。 - CITguy

@the_drow：当你想展示不同状态下（中性、禁用、悬停、聚焦、活动）的不同按钮样式时，这可能非常有用，比如创建组件演示页面。 - Jan Aagaard

@the_drow 这可以用于例如当您想要通过DevTools快速自动化小任务时，其中仅在悬停时才会显示/添加其他元素到DOM。 - Melvin Abraham

我在这里自己寻找这个解决方案。客户需要在Drupal CMS中包装许多Shortcodes，并使父元素能够获取更深层次的子锚点链接并激活它，但仍然显示锚点的悬停状态。不幸的是，没有悬停效果的类，所有代码都是: hover和所有旧代码。通常情况下，这是将整个内容与内部虚拟按钮一起包装在锚点中的情况，但旧站点结构规定必须采用其他方式 :-P - Pocketninja

Answer 2

你最好将:hover样式复制到另一个类中，然后只需在想要永久更改它们时向元素添加该类名即可。伪类是有“伪”的原因的。

- Scott

---

这是我现在正在做的事情，我正在寻找更好的替代方案。 - Pacerier

那样解决问题的方式是错误的。问题是我需要激活:hover，直接的解决方案将是一个命令来确切地执行这个操作。 - Pacerier

那并不能说明问题。这引出了一个问题：为什么hover事件不被信任？ - Pacerier

我不是W3C的成员，我只能猜测，但是Smashing Magazine上的这篇文章（http://www.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/）提供了一些线索：当事件源自设备本身而不是在JavaScript内部合成时，事件被称为“可信任的”。你正在尝试模拟一个悬停事件而不是自然触发它。当然，你可以很容易地模拟点击事件而不实际点击鼠标按钮，所以这显然不是一个难的标准。浏览器对于点击事件更加宽容，但对于悬停事件则不然。 - Scott

确实，我们被允许称之为“焦点”，但却不能称之为“悬停”，这似乎完全是武断的。 - Pacerier