将鼠标悬停在另一个元素下方的元素上

Question

我正在创建一个篮球投篮图可视化效果，以支持区域画笔（请参见灰色框）以及单个点的交互作用（通过将鼠标悬停在某些点上）。我正在使用d3.js来实现这一目标。但是，画笔画布元素在六边形元素上方，因此尽管可见，但我无法与后面的元素进行交互。

我想知道是否有可能在六边形上发生鼠标悬停事件，尽管它们处于背景中。请记住，所有单击和拖动事件都适用于顶层画布元素。

谢谢您的帮助。

编辑：澄清一下，使顶层对单击不可见，因为我仍然需要单击和拖动事件才能在画笔画布上注册，因此无法使用。我只需要下面的六边形的mouseover选项。

Answer 1

如果我们谈论的是 2 个叠加的 DOM 元素，是的，这是可能的。无法真正分辨出 HTML 的结构，因为它不在那里，但请记住，即使该元素没有被鼠标悬停，该事件也会通过其父级冒泡。

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

但是，您不能这样做（仅更改了 HTML 和 CSS）：

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

我唯一能想到的就是在触发元素的父元素上设置一个侦听器，用于检查鼠标位置并将其与元素位置进行比较。