我想使用JavaScript自动将鼠标悬停在网页的元素上,以便显示悬停效果。有可能吗?
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
我想在没有用户交互的情况下悬停链接之一。
答案 0 :(得分: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>
答案 1 :(得分:-1)
这可以通过使用纯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>