Click on the div

Question

When, when hovering notifications, I want it to be transparent and transparent, and it can click it, as in this notification plugin. Pines notify

I tried using pointer-events:none , but then it disables the DOM element, so jQuery does not work on this element. I need jQuery to execute code on hover and output. How can I do that?

Answer 1

To click on a div element, use the following

• Hide overlay div
• call a click on a closed item
• show 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

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 top element re-displayed before the click event on the base element.

Demo: http://jsfiddle.net/t86aV/

Answer 3

Using a combination of applying the :hover selector to the parent div and pointer-events: none 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; } 

Answer 4

What if I use an internal DIV with a high z-index? For instance:

 <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>