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

Question

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

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

感谢您的帮助。

编辑：澄清一下，使顶层对点击不可见是行不通的，因为我仍然需要点击和拖动事件才能在画笔画布上注册。我只需要位于下方的六边形的鼠标悬停选项。

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>

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