How can I allow a click to pass through a div but still react to hover?

Question

Say I have divA that partially overlaps divB. How can I allow clicks on divA to pass through to divB but still have hover fired when hovering over divA?

I'm aware of pointer-events:none; and this makes the clicks pass through but it also prevents the hover.

I have also tried the below, but it did not allow clicks to fall through

$(document).on('click', '.feedback-helper', function(e){
        e.preventDefault();
})

Picture the relation of the divs like:

Here is the why of it (read as: "let's avoid an X Y problem"):

I'm working on an implementation of feedback.js

To see the issue:

• view the feedback.js demo
• click the feedback button in the bottom right
• draw a box on the screen to highlight a section
• click the "black out" button
• try to draw a box inside the first box you can't because the click is blocked by the first box

I need to allow drawing a blackout box over a highlighted area but if I set pointer-events:none; I will lose other hover functionality I have on those elements.

Here is a jsFiddle example

All solutions welcome

Answer 1

I checked your example page and if you set a slightly lower z-index on data-type="highlight" that could take care of the problem, try a z-index of 29990 in comparison to your current 30000. This should allow you to target the highlighted feedback area and overlay it with the blackout elements.