How to use DIV overlay without losing mouse behavior in layers below?

Question

Let's say I have a web page containing various controls, some of which have hover and click behaviors defined on them. Then, I add to the page a translucent DIV overlay with extra information, to be superimposed on top of the rest of the page:

<div class="overlay"></div>

.overlay {
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    background: rgba(0,0,0,.5);
}

This overlay creates a new layer on top of the other content, which is desired, but unfortunately it also blocks mouse behaviors with the underlying controls. When the new layer is enabled, hovering and clicking on the underlying controls does nothing.

Is there a way to use an overlay in this fashion while preserving mouse interaction with the underlying content?

In my application, the overlay is required, but I can use any JavaScript, CSS, jQuery, or other techniques that might work.

Thanks!

Possible duplicate of http://stackoverflow.com/questions/1737480/passing-mouse-clicks-through-an-overlaying-element-div and http://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it — j08691, Jan 25 '12 at 03:36
Hi - were you able to figure out a solution for this? I am basically looking to track the mouse movements without affecting any behavior. — AshD, Jul 10 '21 at 02:19

score 2 · Answer 1 · answered Jan 25 '12 at 10:00

2

You can use CSS3's newest attribute - pointer-events: none;

This attribute tells the browser to ignore all mouse events and send them to the layers below.

answered Jan 25 '12 at 10:00

Peled Roy

329
1
7

1

This looks like it would definitely be a perfect, easy solution, but it might not be official or widely supported yet. See: https://developer.mozilla.org/en/CSS/pointer-events – BrianFinkel Jan 25 '12 at 14:24
But I don't want to ignore all mouse events on the overlaying div, I need the mouse events from both to trigger. – RaisinBranCrunch Apr 14 '17 at 16:24

score 1 · Answer 2 · answered Jan 25 '12 at 03:59

Just wrote this... barely tested. I'm sorry, but I think it kind of works.

$.fn.invisiClone = function() {
    $.each($(this), function() {
        var newTop = $(this).offset().top;
        var newLeft = $(this).offset().left;
        var newHeight = $(this).outerHeight()
        var newWidth = $(this).outerWidth()
        var newClass = $(this).attr('class');
        var newId = $(this).attr('id');

        var newDiv = document.createElement('div');
        $(newDiv).attr('class', newClass);
        $(newDiv).attr('id', newId);
        $(newDiv).css({
            position: 'absolute',
            top: newTop,
            left: newLeft,
            height: newHeight,
            width: newWidth,
            'background-color': 'transparent',
            'z-index': 1000
        })

        $(newDiv).attr('delete','delete')

        $(newDiv).html('');

        $(newDiv).prependTo('body');

    })


}

function killInvisiClones() {
    $('*[delete]').remove();
}

So initiate by running the function against the DOMS you want active

$('.keepAlive').invisiClone();

This is technically bad practice, as it duplicates IDs, but by prepending them to the body, they should take dominance over the previously existing DOMs. It is very important to kill them after you remove your overlay by running:

killInvisiClones()

Again, not the most technically correct way, but it works relatively universally.

So, your solution duplicates all of the items and places them in front of the overlay? — BrianFinkel, Jan 25 '12 at 14:19
Duplicates them but transparent, so your overlay will still appear translucent. — Kyle Macey, Jan 25 '12 at 14:30
Duplicates them with a transparent *background*, so the overlay will be behind them, not on top of them, right? Just clarifying. — BrianFinkel, Jan 25 '12 at 14:31
correct. It essentially creates hotspots that match the dimensions and position of the original DOMs. — Kyle Macey, Jan 25 '12 at 14:52

score 0 · Answer 3 · answered Jan 25 '12 at 03:43

0

Unfortunately, no. The only way to I know to do something similar to that is to fake it by using a translucent image with an image map on top of your overlay div and lining it all up. This is obviously overly complex and you should look for solutions to accomplish the effect you're getting with this overlay in other manners, but it can accomplish the effect you're looking for.

answered Jan 25 '12 at 03:43

Bryan Naegele

660
3
10

Actually, it can be. See the links in my comment to the OP as well as http://www.vinylfox.com/forwarding-mouse-events-through-layers/. – j08691 Jan 25 '12 at 03:47
@j08691 That's a cool technique but it seems that it fails if you scroll the page. Has that been overcome? – Bryan Naegele Jan 25 '12 at 04:03

How to use DIV overlay without losing mouse behavior in layers below?

3 Answers3