JavaScript排他思想，先让其他的全部为无，再给该元素单独添加颜色

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #前端

这段代码展示了如何使用JavaScript实现列表元素的排他高亮效果。当鼠标悬停在某个`li`元素上时，所有其他元素背景色清除，当前元素背景变为黄色。鼠标离开时，元素背景色恢复。这可用于创建交互式的用户界面效果。

JavaScript排他思想，先让其他的全部为无，再给该元素单独添加颜色

   var lis = document.querySelector('ul').querySelectorAll('li')
    console.log(lis);
    for(var i=0;i<lis.length;i++){
      lis[i].onmouseover = function(){
        for(var i = 0;i<lis.length;i++){
          lis[i].style.background = ''
        }
        this.style.background = 'yellow'
      }
      lis[i].onmouseout = function(){  //鼠标离开颜色恢复
        this.style.background = ''
      }
    }