在另一个元素下面悬停在一个元素上

Question

在另一个元素下面悬停在一个元素上

javascripthtmlcsswebd3.js

7

我正在创建一个篮球投篮图表可视化工具，支持区域刷选（见灰色框）和个别点交互（通过悬停在某些点上）。我使用d3.js来实现此功能。然而，刷选画布元素位于六边形元素之上，因此我无法与其后面的元素进行交互，尽管它们是可见的。

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

谢谢你的帮助。

编辑：为了澄清，使顶层不可点击将不起作用，因为我仍然需要在刷选画布上注册单击和拖动事件。我只需要六边形的鼠标悬停选项，位于其下面。

- cherrypickerio

1

我们是在讨论两个不同的DOM元素重叠还是画布元素内的图层？ - MinusFour

它们是两个不同的DOM元素叠加在一起，我非常确定。任何帮助都将不胜感激。 - cherrypickerio

1

为什么不把画笔画布元素放在节点下面？ - Cool Blue

我尝试了这个，但一旦画布元素在节点下方，你就无法从六边形开始拖动画笔。我还尝试了当鼠标按下时，临时将画布置于前面，并向画布发送模拟的鼠标按下事件，但从可用性角度来看，这种方法存在很多错误。 - cherrypickerio

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MinusFour · Accepted Answer

If we are talking about 2 superposed DOM elements yes, it's possible. Can't really tell out of the structure of your HTML because it's not there but keep in mind that the event will bubble through its parents even if the element is 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>

然而，你不能这样做（仅更改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>

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