javascript - Hover over an element underneath another element -

i'm creating basketball shot chart visualization support area brushing (see grey box) individual point interaction (by hovering on points). using d3.js achieve this. however, brush canvas element above hexagon elements, , cannot interact elements behind, although visible.

i wondering if possible have mouseover event on hexagons despite them being in background. keep in mind click , drag events apply top level canvas element.

thank help.

edit: clarify, making top layer invisible clicks not work still need click , drag events register on brush canvas. need mouseover option hexagons, lying underneath.

if talking 2 superposed dom elements yes, it's possible. can't tell out of structure of html because it's not there keep in mind event bubble through parents if element 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, can't (only html , 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 think set listener on parent of triggering element checks mouse position , compares element position.