导航的Onhover改变为浅色背景

Question

我正在为我的网站执行一项功能，我希望功能与here相同。

详细说明：当我将鼠标悬停在导航上时，我想让背景亮起来。

如果需要，请告诉我。

Answer 1

我希望我理解你的问题。请参阅以下示例：

$(document).ready(function() {

    $("ul li").mouseover(function () {
        $(this).addClass('light-bg', 1000);
       $('body').addClass('new-body-bg', 1000);
      
       });
   
      $("ul li").mouseleave(function () {
        $(this).removeClass('light-bg', 1000);
        $('body').removeClass('new-body-bg', 1000);

      }); });

ul {
  background-color: #ddd; /* Choose the color of your choice */
  height: 40px;
  }


li {
  display: inline-block;
  font-size: 18px;
  padding: 10px;
  line-height: 20px;
  text-align: center;
  margin-right: 15px;
  }

.light-bg {
  background-color: #fff; /* Choose the color of your choice */
 line-height: 20px;
  }

 .new-body-bg {
  background-color: #ccc; /* Choose the color of your choice */
  position: relative;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<li><a href="#"> One </a></li>
	<li><a href="#"> Two </a></li>
	<li><a href="#">Three </a></li>
	<li><a href="#"> Four</a></li>
</ul>

It works perfectly on JsFiddle

Answer 2

请参阅：http://jsfiddle.net/snlacks/tekokmke/1/

不使用jQuery，

1. 您希望找到要执行此操作的所有元素
2. 然后你想循环通过它们
3. 您将为每个人应用两个听众，一个用于进入，一个用于离开。

JS：

var mes = document.querySelectorAll(".me");

function changeIn(){
        document.body.style.backgroundColor = "lightgray";
}

function changeOut(){
        document.body.style.backgroundColor = "darkgray";
}

for(i = 0; i < mes.length; i++){
       mes[i].onmouseenter = changeIn;
       mes[i].onmouseleave = changeOut;
}