Show an element without "hitbox" (does not take mouse/touch input)

Question

What I am trying to achieve is a kind of notification box (a div element). I would like to show it with some opacity. And I need the box to be "invisible" by the events. For example, if the box is on top of a button, I can still click the button through the box.

Some may suggest make it movable by the user, but the current UI does not allow me to do so.

Can it be achieved by any mean? HTML, CSS, Javascript and jQuery are all available.

My current notification box CSS:

.notification-box {
    position: fixed;
    top: 0;
    left: 100vw;
    transform: translate(-100%, 0);
}

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

Use css pointer events as noted in this post

.notification-box {
    position: fixed;
    top: 0;
    left: 100vw;
    transform: translate(-100%, 0);
    pointer-events: none;
}

Here is a codepen showing it in action.

edited May 23 '17 at 10:26

Community

1
1

answered Aug 26 '15 at 17:42

Jacob Petersen

1,463
1
9
17

Thanks for the example. Works perfectly! – Luke Vo Aug 26 '15 at 17:47
No problem! Can you mark it as the answer so other people looking for an answer know it worked? – Jacob Petersen Aug 26 '15 at 17:49
1

Yes, marked. It didn't pass 15 mins when I commented. – Luke Vo Aug 26 '15 at 17:54

score 1 · Answer 2 · edited May 23 '17 at 12:14

This isn't exactly a duplicate, but the answer to this question is also the answer to your question.

jQuery - Trigger click even on element behind

You can use the CSS pointer-events property:

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.
#element {
  pointer-events: none;
}
Or you can trigger the click event:
$('#box').click(function(){
   $('#target').trigger('click')
})

Show an element without "hitbox" (does not take mouse/touch input)

2 Answers2

Linked