Categories
click css layer mouseevent

Click through div to underlying elements

1915

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.

My Problem

0

    3076

    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/.GIFs in the overlay div and have clicks flow through to elements underneath.

    CSS:

    pointer-events: none;
    background: url("https://stackoverflow.com/questions/3680429/your_transparent.png");
    

    IE11 conditional:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://stackoverflow.com/questions/3680429/your_transparent.png", sizingMethod='scale');
    background: none !important;
    

    Here is a basic example page with all the code.

    2

    478

    Yes, you CAN force overlapping layers to pass through (ignore) click events.
    PLUS you CAN have specific children excluded from this behavior…

    You can do this, using pointer-events

    pointer-events influences the reaction to click-, tap-, scroll- und hover events.


    In a layer that should ignore / pass-through mentioned events you set

    pointer-events: none; 
    

    Children of that unresponsive layer that need to react mouse / tap events again need:

    pointer-events: auto; 
    

    That second part is very helpful if you work with multiple overlapping div layers (probably some parents being transparent), where you need to be able to click on child elements and only that child elements.

    Example usage:

    .parent {
      pointer-events:none;        
    }
    .child {
      pointer-events:auto;
    }
    <div class="parent">
      <a href="#">I'm unresponsive</a>
      <a href="#" class="child">I'm clickable again, wohoo !</a>
    </div>

    3

    47

    Allowing the user to click through a div to the underlying element depends on the browser. All modern browsers, including Firefox, Chrome, Safari, and Opera, understand pointer-events:none.

    For IE, it depends on the background. If the background is transparent, clickthrough works without you needing to do anything. On the other hand, for something like background:white; opacity:0; filter:Alpha(opacity=0);, IE needs manual event forwarding.

    See a JSFiddle test and CanIUse pointer events.

    1

    • Same problem in Safari. The pointer-events are wrong if the underlying div has a non-transparent background.

      – Thomas

      Mar 8 at 14:25