是否可以使用 JavaScript 悬停元素？答案

【问题标题】：Is it possible to hover an element using JavaScript?是否可以使用 JavaScript 悬停元素？
【发布时间】：2019-03-28 17:11:04
【问题描述】：

我想使用 JavaScript 自动将鼠标悬停在我的网页元素上，以便显示悬停效果。有可能吗？

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

我想在没有用户交互的情况下悬停其中一个链接。

【问题讨论】：

请展示代码示例和您的尝试。
欢迎来到 Stackoverflow。请参考stackoverflow.com/help/how-to-ask。分享一下目前为止尝试过的相关代码sn-ps。

标签： javascript html css hover

【解决方案1】：

通过为悬停效果使用 CSS 类，您可以使用传统的 CSS :hover 伪选择器来获得正常的悬停效果。但您也可以手动添加另一个触发器类来应用相同的样式。

const links = Array.from( document.querySelectorAll( '.link-hover' ));
document.querySelector( '#toggle_hover' ).addEventListener( 'click', event => {
  links.forEach( link => link.classList.toggle( 'active' ));
});

.link-hover:hover,
.link-hover.active {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

<a class="link-hover" href="#">Link 1</a>
<a class="link-hover" href="#">Link 2</a>
<a class="link-hover" href="#">Link 3</a>

<button id="toggle_hover">Toggle hover</button>

【讨论】：

【解决方案2】：

这可以通过使用纯 CSS 轻松完成：

.link:hover {
  background-color: blue;
}

<a class="link" href="#">Link 1</a>
<a class="link" href="#">Link 2</a>
<a class="link" href="#">Link 3</a>

【讨论】：