Question

任何人都可以帮助我解决如何触发具有较低z-index值的DOM元素的事件。

// HTML代码

...
<div>
//Hihger Z-index element
<div id="element1" style="position: absolute;Z-index:5; height: 500px; width: 900px;"></div>    

//Lower Z-index element
<div id="element2" style="position: absolute;Z-index:2; height: 500px; width: 900px;"></div>  
</div>

//绑定事件

$("#element2").on("mouseenter",function() {alert("Problem with lower z-index")});

如果我为＃element2设置了更高的Z-index值，则触发事件。

Answer 1

将pointer-events：none添加到你的css代码＃element1 {pointer-events：none;阅读更多here。检查DEMO

CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有的话）可以成为鼠标事件的目标。如果未指定此属性，则visiblePainted值的相同特征将应用于SVG内容。

  <div>
       //Hihger Z-index element
        <div id="element1" style="position: absolute;Z-index:5; height: 500px; width: 900px;pointer-events:none;"></div>    

     //Lower Z-index element
     <div id="element2" style="position: absolute;Z-index:2; height: 500px; width: 900px;"></div>  
 </div>

触发具有较低Z-index值的DOM元素的事件

1 个答案: