CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Winston Smith
Winston Smith

Reputation: 153

How to click-through a div without losing its hover events?

I have 2 divs stacked upon one another. I want to be able to receive click events for the bottom element without losing hover events for the top element.

If I assign pointer-events: none top the top element, the click-through works, but then I lose the hover events for the top element.

How can it be done?

Upvotes: 1

Views: 833

Answers (1)

Alexis Wilke
Alexis Wilke

Reputation: 20741

The MDN docs clearly says that's what is supposed to happen:

none
  The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

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

What you can do is write a jQuery script that captures the clicks and transmits them.

jQuery("top-div").click(function(e)
  {
     e.preventDefault();
     jQuery("bottom-div").click();
  });

Something like that...

Upvotes: 1

Related Questions