Question

我最近一直在搞 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";
    });
});

当然，我尝试过查询选择器和许多其他形式，但似乎没有任何效果有什么想法吗？

Answer 1

您需要在每个 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>

Answer 2

另一种方法：

document.getElementById("myId").onmouseover = function() 
{
    this.style.backgroundColor = "red";
}

设置一个“id”并运行“mouseover”的代码

使用 JS 更改鼠标悬停样式

2 个答案: