UI设计中的鼠标穿透问题：如何让鼠标穿梭于叠加图像之间？-css教程-PHP中文网

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

DDD

发布： 2024-10-23 22:28:48

转载

1129人浏览过

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

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

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

解决方案：

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

1. 事件代理给父元素

为父元素（<ul class="test">)添加mouseover事件监听器。

2. 鼠标移入添加选中类

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

在事件处理函数中，如果鼠标移入的是图层内包含的<i>元素，则为其所在的<li>元素添加.selected类。

3. 鼠标穿透效果

为.selected类之外的其他<li>元素添加.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设计中的鼠标穿透问题：如何让鼠标穿梭于叠加图像之间？的详细内容，更多请关注php中文网其它相关文章！