UI设计中的鼠标穿透问题：如何让鼠标穿梭于叠加图像之间？

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《UI设计中的鼠标穿透问题：如何让鼠标穿梭于叠加图像之间？》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

突破元素碰触体积，让鼠标在层叠图像间自由穿梭

在ui设计中，摆放图层时经常遇到两图相交的情况。当鼠标在这些相交区域移动时，如何让鼠标无视中间碰触体积的干扰，进入相邻图层的实体图形范围？

解决方案：

我们采用事件代理和css鼠标穿透技术解决这一问题。

1. 事件代理给父元素

为父元素（

)添加mouseover事件监听器。

2. 鼠标移入添加选中类

在事件处理函数中，如果鼠标移入的是图层内包含的元素，则为其所在的

• 元素添加.selected类。

  3. 鼠标穿透效果

  为.selected类之外的其他

• 元素添加.disble类，让它们对鼠标事件透明。

  css 代码：

  .selected {
      background-color: red !important;
  }
  .disble {
      pointer-events: none;
  }

  javascript 代码：

  document.querySelector('.test').addEventListener('mouseover', (e) => {
          const { nodeName, classList, parentNode } = e.target;
          if (nodeName === 'I') {
              // 清除上一个选中的
              const selected = document.querySelector('.selected');
              if (selected) {
                  selected.classList.remove('disable');
                  selected.classList.remove('selected');
              }
              // 添加当前类
              parentNode.classList.add('selected');
              // 鼠标穿透
              document.querySelectorAll('li:not(.selected)').forEach((v) => v.classList.add('disable'));
          } else if(nodeName !== 'LI'){
              // 清除
              document.querySelector('.selected')?.classList.remove('selected');
          }
      })

  通过上述方法，鼠标可以在层叠图像之间自由穿梭，而无需受碰触体积的干扰。

  到这里，我们也就讲完了《UI设计中的鼠标穿透问题：如何让鼠标穿梭于叠加图像之间？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！