Menu
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 ?
241
To duplicate a div onclick event with JavaScript, we can call cloneNode` to clone an element. Then we can set the onclick property of the cloned element to the same event handler function as the original element. to add a div. Then we deep clone the element by calling cloneNode with true .
Copying an element # Now, we can use the Element. cloneNode() method to create a copy. You call the cloneNode() method on the element you want to copy. If you want to also copy elements nested inside it, pass in true as an argument.
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
To be able to click through a div use the following
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 />");
});
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
<div class="container">
<div class="clickthrough">Mouseover</div>
<button onClick="alert('click!');">Click me</button>
</div>
.container {
position: relative;
}
.clickthrough {
position: absolute;
}
.container:hover .clickthrough {
opacity: 0.25;
pointer-events: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
