导航悬停在浅色背景上

Onhover of Navigation change to light color background

本文关键字：背景 悬停 导航      更新时间：2023-09-26

我正在为我的网站做一个功能，我想要一个相同的功能。

详细：当我将鼠标悬停在导航上时，我想使背景发光。

如果需要其他任何内容，请告诉我。

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

$(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>

它在 JsFiddle 上完美运行

参见：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;
}
相关文章：