如何使用css或者js处理层叠图像的触发范围?

Question

常规的两个正方形在不使用rotate旋转的情况下摆成\型或者/型，因为ui设计的原因导致两图中间存在元素碰触体积交汇处（红框标注的位置）
红色和黄色是实际展示图形（这俩图形由于ui已经做好的，没法使用旋转来调位置），灰色是元素碰触体积
这种情况下该如何让鼠标离开红色或者黄色进入对方的实体图形范围而无视碰触体积范围便让当前层z-index在最上层？

下面是上面图形的模拟样式：

<ul class="test" style="width: 500px; height: 500px;position: relative;">
    <li class="test-red" style="width: 100px; height: 100px; background: rgba(0,0,0, 0.3);position: absolute;top: 50px;left: 50px;">
        <i style="display: block; width: 100px; height: 100px; background: rgba(224,89,55, 0.5);transform: rotate(45deg);"></i>
    </li>
    <li class="test-blue" style="width: 100px; height: 100px; background: rgba(0,0,0, 0.3);position: absolute;top: 130px;left: 130px;">
        <i style="display: block; width: 100px; height: 100px; background: rgba(193,196,95, 0.5);transform: rotate(45deg);"></i>
    </li> 
</ul>

Answer 1

两个元素必然有层叠关系，也就是交叉区域只有第二个li的覆盖在上面，第一个li的交叉区域会被挡住。

方案：用事件代理给ul元素设置mouseover监听，并给移入的li添加类，除当前移入的li之外，其余的全都设置鼠标穿透 pointer-events: none。

css:

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

js:

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');
        }
    })