CODEWITHSUNDEEP
javascriptjqueryhtml
Bharath
Bharath

Reputation: 101

Triggering events for the DOM elements with lower Z-index value

Can anyone help me out , on how to trigger events for DOM elements having lower z-index value .

//HTML code

...
<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>

//Binding Events

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

If I set a higher Z-index value for the #element2 the event is triggered.

Upvotes: 1

Views: 3099

Answers (1)

Nishit Maheta
Nishit Maheta

Reputation: 6031

add pointer-events:none to your css code #element1{ pointer-events:none; } read more here . check DEMO

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content. 

  <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>

Upvotes: 7

Related Questions