如何解决使用 JS 更改鼠标悬停样式
我最近一直在搞 JS,我想学习,使用 JS 操作 html 元素和样式。当然,大多数样式使用 css 更容易,但使用 JS 似乎更有趣,对我更有益。
<nav>
<div class="logo">
<a href="/"></a>
<img src="logo.png" alt="logo" width="80" height="80">
</div>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/aboutus.html">About us</a></li>
<li><a href="/products.html">Products</a></li>
<li><a href="/signup.html">Sign up</a></li>
</ul>
</nav>
我有这个菜单栏,对于我正在构建的网站,而不是使用 onhover 是 CSS 我想使用 mouSEOver 事件听众改变颜色或字体大小,我有点卡住了,因为似乎没有任何工作
这是我目前得到的:
window.addEventListener('load',(event) =>{
document.getElementsByClassName("nav-links").addEventListener('mouSEOver',()=> {
document.getElementsByClassName("nav-links").style.color="red";
});
});
当然,我尝试过查询选择器和许多其他形式,但似乎没有任何效果 有什么想法吗?
解决方法
您需要在每个 li 元素上添加一个 EventListener。
let navLinks = document.querySelector(".nav-links");
let li = navLinks.querySelectorAll("li");
for(let i=0; i<li.length; i++){
li[i].addEventListener("mouseover",()=>{
li[i].style.color = "red";
});
}
<nav>
<div class="logo">
<a href="/"></a>
<img src="logo.png" alt="logo" width="80" height="80">
</div>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/aboutus.html">About us</a></li>
<li><a href="/products.html">Products</a></li>
<li><a href="/signup.html">Sign up</a></li>
</ul>
</nav>
另一种方法:
document.getElementById("myId").onmouseover = function()
{
this.style.backgroundColor = "red";
}
设置一个“id”并运行“mouseover”的代码
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。