將鼠標懸停在另一個元素下的元素

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>

我能想到爲唯一的事情就是成立觸發元素父級上的偵聽器，用於檢查鼠標位置並將其與元素位置進行比較。