5

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 ?

e-sushi
  • 13,786
  • 10
  • 38
  • 57
Dove
  • 125
  • 1
  • 2
  • 8

4 Answers4

6

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 />");
});
Sam Battat
  • 5,725
  • 1
  • 20
  • 29
4

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;
}
Community
  • 1
  • 1
thgaskell
  • 12,772
  • 5
  • 32
  • 38
3

Here's how:

$(".above").click(function(e) {
    // Hide the element so we can reach the element below.
    $(this).hide(0);

    // Fetch the underlying element.
    var below = $(document.elementFromPoint(e.clientX, e.clientY));

    // Trigger a click on the underlying element at the earliest convenience.
    setTimeout(function() {
        below.trigger("click");
    });

    // Display the element again.
    $(this).show(0);
});

$(".below").click(function() { alert("Below clicked!"); });

The setTimeout block makes the topmost element reappear before the click event on the underlying element.

Demonstration: http://jsfiddle.net/t86aV/

Hubro
  • 56,214
  • 69
  • 228
  • 381
0

What if to use inner DIV with high z-index? For example: 

<style>
    .sub {
        position: relative;
        background: #99f;
        width: 100px;
        height: 100px;
    }
    .top {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 2;
    }
    .opacityLayer {
        position: absolute;
        background: #fff;
        width: 100px;
        height: 100px;
        opacity: 0.5;
        left: 30px;
        top: 30px;
    }
</style>
<a href="#"><div class="sub"><div class="top"></div></div></a>
<div class="opacityLayer"></div>
gwer
  • 614
  • 3
  • 5