突破元素碰触体积，让鼠标在层叠图像间自由穿梭
在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设计中的鼠标穿透问题：如何让鼠标穿梭于叠加图像之间？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630552.html
微信扫一扫 
支付宝扫一扫 
