javascript - 是否可以使用 JavaScript 悬停元素?
问题描述
我想使用 JavaScript 自动悬停在我的网页元素上,以便悬停效果可见。可能吗?
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
我想在没有用户交互的情况下悬停其中一个链接。
解决方案
通过为悬停效果使用 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>
推荐阅读
- python - 为什么在 Python 中使用 Robobrowser 进行网络抓取会导致“任务已被破坏,但它正在等待处理!”
- amazon-web-services - 处理传递给 AWS 数据管道中的 SQL 活动的参数
- javascript - ReactJS - ref 不适用于 connect 和 redux-form
- sqlite - 本地 Perl DBI 模块,找不到对象方法“连接”
- javascript - 如何在 Angular 7 中创建函数
- r - R数据框通过列名的第一个字母访问列
- python - Spark 和 Cassandra 在同一个 docker 中
- javascript - 在 Safari 中链接 .connect() 方法时获取“未定义不是对象”
- mobile - 空白:nowrap 效果不佳,我做错了什么?
- jquery - 一个单元格中的多行具有相同的记录