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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

谢谢你的帮助。

编辑：澄清，使顶层不可见点击不会工作，因为我仍然需要单击并拖动事件注册画笔画布上。我只需要鼠标悬停在下面的六边形选项。

回答：

如果我们谈论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>

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

以上是 将鼠标悬停在另一个元素下的元素 的全部内容， 来源链接： utcz.com/qa/266474.html

回到顶部