Hover over an item under another item

Question

I am creating a visualization of a basketball diagram that is designed to support cleaning the area (see the gray square), as well as individual point interaction (by hovering over specific points). For this I use d3.js. However, the brush canvas element is located above the hexagon elements, and therefore I cannot interact with the elements behind, although they are visible.

I was wondering if it is possible to have a mouseover event on hexagons even though they are in the background. Keep in mind that all click and drag events apply to the top-level canvas element.

Thank you for your help.

EDIT. To clarify, making an invisible click, the top layer will not work, since I still need to click and drag events to register on the brush canvas. I just need the mouseover option for the hexagons below it.

Answer 1

If we talk about 2 superimposed DOM elements, yes, it is possible. I can’t tell from the structure of your HTML, because it is not there, but keep in mind that the event will bubble through its parents, even if this element is not hushed up.

$('#container').on('mouseover', function(){
  $('#results1').html('Inside green square');
  $('#results3').html('Last caller: green');
  });

$('#child').on('mouseover', function(){
  $('#results2').html('Inside blue square');
  $('#results3').html('Last caller: blue');
  });

$('#container').on('mouseleave', function(){
  $('#results3').html('Last caller: green');
  $('#results1').html('');
  });

$('#child').on('mouseleave', function(){
  $('#results3').html('Last caller: blue');
  $('#results2').html('');
  });

#container {
  height: 100px;
  width: 100px;
  background-color: green;
 }

#child {
  height: 50px;
  width: 50px;
  background-color: blue;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="child">
    </div>
  </div>
<pre id="results1"></pre>
<pre id="results2"></pre>
<pre id="results3"></pre>

Run codeHide result

However, you cannot do this (only HTML and CSS have changed):

$('#container').on('mouseover', function(){
  $('#results1').html('Inside green square');
  $('#results3').html('Last caller: green');
  });

$('#child').on('mouseover', function(){
  $('#results2').html('Inside blue square');
  $('#results3').html('Last caller: blue');
  });

$('#container').on('mouseleave', function(){
  $('#results3').html('Last caller: green');
  $('#results1').html('');
  });

$('#child').on('mouseleave', function(){
  $('#results3').html('Last caller: blue');
  $('#results2').html('');
  });

#container {
  height: 100px;
  width: 100px;
  background-color: green;
 }

#child {
  position: absolute;
  top: 10px;
  height: 50px;
  width: 50px;
  background-color: blue;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
 <div id="child"></div>
<pre id="results1"></pre>
<pre id="results2"></pre>
<pre id="results3"></pre>

Run codeHide result

, , , .