鼠标选中数据行有高亮效果

用js编写选中表格行高亮页面效果

下面是页面基础元素代码

这里改成li:hover{}，里面的不动，试试

点击某行，给这一行增加类名 'active'
然后设置样式 .active{
color: #00CCFF;
}

---

如有帮助，麻烦点个【采纳此答案】 谢谢啦~

如果是悬浮高亮的话 就是用css中的:hover，如果是点击的时候高亮选中 那么就通过注册li的点击事件，在事件中我们为当前的li标签添加上一个Highlight类名，css设置.Highlight{background-color:#00CCFF}，这样设置完后会出现一个问题就是我们点击谁就高亮但是之前高亮的并没有清除，所以我们需要再点击开始的时候就获取到所有包的Highlight类名的dom然后清除这个类名就可以了

一：可以用 li：hover选择器修改鼠标悬停样式。
二：用点击事件，给li注册点击事件
1.修改其他所有（或者上一个高亮）li 元素颜色为原本样式
2.将事件源修改为高亮

楼上那哥们写了个鼠标移入移出事件挺好的，我写了个点击事件，效果类似

<script>
    let ul = document.querySelector('ul')
    let lis = document.querySelector('li')
    //遍历li元素注册点击事件
    for(let i = 0;i<lis.length;i++){
      lis[i].onclick = function(){
        //如果有高亮类名则找到并取消
        if(document.querySelector('.highLight')){
          document.querySelector('.highLight').classList.remove('highLight')
        }
        //给事件源添加高亮类名
        this.classList.add('highLight')
      }
    }
  </script>