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

Question

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

我想知道是否可以在六边形上进行鼠标悬停事件，尽管它们在背景中。请记住，所有单击和拖动事件都适用于顶级 Canvas 元素。

感谢您的帮助。

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

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>

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