Click through div [duplicate]

Question

When on notification hover, i want it to make opacity to semi transparent and being able to click through it like in this notification plugin Pines Notify

I tried using pointer-events:none, but then it disables DOM element, so jQuery isn't working on this element. I need jQuery to execute code when on hover and on hover out. How can it be done ?

Answer 1

To be able to click through a div use the following

1. Hide the overlay div
2. trigger a click on the covered element
3. show the div again

http://jsfiddle.net/H6UEU/1/

$('#front-div').click(function (e) {
    $(this).hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $(this).show();
});
$(".tobeclicked").click(function(){
    $("#result").append("clicked<br />");
});

Answer 2

Using a combination of applying the :hover selector to the parent div and the pointer-events: none directive on the child div.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

JSFiddle

HTML

<div class="container">
    <div class="clickthrough">Mouseover</div>
    <button onClick="alert('click!');">Click me</button>
</div>

CSS

.container {
    position: relative;
}

.clickthrough {
    position: absolute;
}

.container:hover .clickthrough {
    opacity: 0.25;
    pointer-events: none;
}