Hovering over an element hidden behind another element? [duplicate]

This question already has an answer here:

• HTML/CSS: Make a div “invisible” to clicks? 3 answers

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.