CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Wesley Smith
Wesley Smith

Reputation: 19571

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

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:

enter image description here

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:

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

Upvotes: 8

Views: 6469

Answers (3)

Jamie Barker
Jamie Barker

Reputation: 8246

Another option is to use a pseudo element instead. Perhaps that will do what you need.

$('#toggleBlack').on('click', function() {
  $('#divA').toggleClass('hidden');
});
div {
  border: 1px solid black;
}
#divA {
  background: whitesmoke;
  position: relative;
}
#divA.hidden:before {
  position: absolute;
  content: ' ';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">Highlight the text once I'm hidden and cut/copy/drag</div>
<br />
<br />
<button id="toggleBlack">Toggle Hidden</button>

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8246

You could get the click event for the overlaying element to initiate the click event for the underlying element.

Native JS Example:

document.getElementById('divA').addEventListener('click', function() {
  alert('Clicked A');
});
document.getElementById('divB').addEventListener('click', function() {
  var event = document.createEvent('HTMLEvents');
  event.initEvent('click', true, false);
  document.getElementById('divA').dispatchEvent(event);
});
div {
  cursor: pointer;  
  border: 1px solid black;
}
#divA {
  height: 300px;
  width: 300px;
  background: whitesmoke;
}
#divB {
  height: 30px;
  width: 30px;
  background: grey;
  position: absolute;
  left: 100px;
  top: 100px;
}
#divB:hover {
  background: green;  
}
<div id="divA"></div>
<div id="divB"></div>

jQuery Example:

$('#divA').on('click', function() {
  alert('Clicked A');
});
$('#divB').on('click', function() {
  $('#divA').trigger('click');
});
div {
  cursor: pointer;  
  border: 1px solid black;
}
#divA {
  height: 300px;
  width: 300px;
  background: whitesmoke;
}
#divB {
  height: 30px;
  width: 30px;
  background: grey;
  position: absolute;
  left: 100px;
  top: 100px;
}
#divB:hover {
  background: green;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA"></div>
<div id="divB"></div>

Upvotes: 1

Chris McLellan
Chris McLellan

Reputation: 31

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.

Upvotes: 1

Related Questions