why this navigation bar not changing its background on hover-CodePudding

I'm learning JS, I know I can do this in CSS, but I want to change the navigation bar's background color and its not working...

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>

Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details Details

CodePudding user response：

first of all, text-decoration and not text-decaration for more, and there's no such event called hover in javascript.
you'll need onmouseenter or onmouseover, and also to change the background you need to write this Element.style.backgroundColor and not this Element.backgroundColor, more

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>