为什么这个导航栏没有改变它在 hover 上的背景

Question

我正在学习 JS，我知道我可以在 CSS 中做到这一点，但我想更改导航栏的背景颜色并且它不起作用......

 var nav = document.querySelector('#nav'); nav.addEventListener('onhover', function(){ nav.background = "red" });

 html,body{ background: cyan; } #nav{ background-color: orange; display: flex; flex-direction: row; justify-content: space-evenly; padding: 20px 0; } li{ margin-left: 20px; list-style: none; } li a{ color: black; text-decaration: none; }

 <section> <div> <ul id="nav"> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> </ul> </div> </section>

详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情 详情

Answer 1

首先是text-decoration而不是text-decaration for more ，并且在 javascript 中没有名为hover的此类事件。
您将需要onmouseenter或onmouseover ，还需要更改背景，您需要编写此Element.style.backgroundColor而不是此Element.backgroundColor ， 更多

nav.addEventListener('mouseover', function(){
  nav.style.backgroundColor = "red";
});
//or 
//nav.addEventListener('mouseenter', function(){
//  nav.style.backgroundColor = "red";
//});
nav.addEventListener('mouseleave', function(){
  nav.style.backgroundColor = "orange";
});

 var nav = document.querySelector('#nav'); nav.addEventListener('mouseover', function(){ nav.style.backgroundColor = "red"; }); //or //nav.addEventListener('mouseenter', function(){ // nav.style.backgroundColor = "red"; //}); nav.addEventListener('mouseleave', function(){ nav.style.backgroundColor = "orange"; });

 html,body{ background: cyan; } #nav{ background-color: orange; display: flex; flex-direction: row; justify-content: space-evenly; padding: 20px 0; } li{ margin-left: 20px; list-style: none; } li a{ color: black; text-decoration: none; }

 <section> <div> <ul id="nav"> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> <li> <a href="#"> Link </a> </li> </ul> </div> </section>