css+js练习之同时选中元素高亮

求求你了教我代码吧

于 2024-05-13 23:17:54 发布

阅读量325

点赞数 9

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/2302_82050946/article/details/138823890

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>高亮显示</title>
  <style>
    *{
      background-color: black;
    }
    .ul{
      display: flex; 
      /*开启浮动布局*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      /* 使布局居中 */
      align-items: center;
      list-style-type: none;
    }
    li{
      background-color: rgb(189, 225, 225);
      height: 100px;
      width: 100px;
      margin: 0 15px;
      border-radius: 30%;
      transition: all 0.3s;
    }
    .left{
      background-color: rgb(163, 236, 236);
      transform: scale(1.1);
      box-shadow: 0 0 20px 3px white;
    }
    .right{
      background-color: rgb(163, 236, 236);
      transform: scale(1.1);
      box-shadow: 0 0 20px 3px white;
    }
    .active{
      background-color: rgb(113, 185, 236);
      transform: scale(1.2);
      box-shadow: 0 0 30px 5px white;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="ul">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </div>
  </div>

  <script>
    const lis = document.querySelectorAll('li')
    // 获取所有格子对象
    lis.forEach(function(event){
      event.addEventListener('mouseenter',function(){
        // 每个对象创建鼠标悬浮事件（添加目标类名）
        lis.forEach(function(e){
          e.classList.remove('active','left','right')
        })
        //添加标签前移除所有标签
        let p = event.previousElementSibling
        if(p) p.classList.add('left')
        //如果存在当前悬浮对象的 上一个兄弟元素 就 添加left标签给上一个兄弟元素
        let n = event.nextElementSibling
        if(n) n.classList.add('right')
        //如果存在当前悬浮对象的  下一个兄弟元素 就 添加right标签给下一个兄弟元素
        event.classList.add('active')
        //给当前悬浮元素添加active标签
      })

      event.addEventListener('mouseleave',function(){
        lis.forEach(function(e){
          e.classList.remove('active','left','right')
        })
      })
      // 每个对象创建鼠标离开事件（清空类名）
    })
  </script>
</body>
</html>