Click through a DIV to underlying elements

I have a div that has background:transparent , along with border . Underneath this div , I have more elements.

Currently, I'm able to click the underlying elements when I click outside of the overlay div . However, I'm unable to click the underlying elements when clicking directly on the overlay div .

I want to be able to click through this div so that I can click on the underlying elements.

---

Yes, you CAN do this.

Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.

Using AlphaImageLoader , you can even put transparent .PNG/.GIF s in the overlay div and have clicks flow through to elements underneath.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.

---

Also nice to know...
You can disable pointer-events in a parent element (probably transparent div) but have it still enabled for its child elements.
This is helpful if you work with multiple overlapping div layers, where you want to be able to click child elements, while having the parent layers not react on any mouse events at all. For this all parenting divs get pointer-events: none and its clickable children get pointer-events reenabled by pointer-events: auto

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

---

Click through a DIV to underlying element works different in browsers. Opera needs manual event forwarding, Firefox and Chrome understand CSS pointer-events:none; and IE doesn't need anything with transparent background; with eg background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); IE needs forwarding like Opera.

See forwarding test at http://jsfiddle.net/vovcat/wf25Q/1/ and http://caniuse.com/pointer-events. Pointer-events CSS property has been moved from CSS3-UI to CSS4-UI.

链接地址: http://www.djcxy.com/p/4706.html

上一篇: 如何禁用HTML <textarea>的大小调整器？

下一篇: 点击一个DIV到底层元素