Hover over an element underneath another element

Question

I'm creating a basketball shot chart visualization which is to support area brushing (see grey box) as well as individual point interaction (by hovering over certain points). I am using d3.js to achieve this. However, the brush canvas element is above the hexagon elements, and thus I cannot interact with the elements behind, although they are visible.

I was wondering if it were possible to have a mouseover event on the hexagons despite them being 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 the top layer invisible to clicks would not work as I still need click and drag events to register on the brush canvas. I simply need the mouseover option for the hexagons, lying underneath.

Answer 1

If we are talking about 2 superposed DOM elements yes, it's possible. Can't really tell out of the structure of your HTML because it's not there but keep in mind that the event will bubble through its parents even if the element is not in being moused over.

$('#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>

However, you can't do this (only HTML and CSS 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>

Only thing I could think for that is to set up a listener on a parent of the triggering element that checks for the mouse position and compares it to the element position.