Наведите указатель мыши на элемент под другим элементом

Question

Я создаю визуализацию графика выстрела из баскетбола, которая предназначена для поддержки чистки области (см. Серый квадрат), а также для индивидуального точечного взаимодействия (путем зависания над определенными точками). Для этого я использую d3.js. Однако элемент холста кисти находится над элементами шестиугольника, и поэтому я не могу взаимодействовать с элементами позади, хотя они видны.

Мне было интересно, возможно ли иметь событие mouseover на шестиугольниках, несмотря на то, что они находятся в фоновом режиме. Имейте в виду, что все события щелчка и перетаскивания применяются к элементу холста верхнего уровня.

Благодарим за помощь.

РЕДАКТИРОВАТЬ: Чтобы прояснить, сделать верхний слой невидимым для кликов не будет работать, поскольку мне все еще нужно щелкнуть и перетащить события, чтобы зарегистрироваться на холсте кисти. Мне просто нужна опция mouseover для шестиугольников, лежащих под ней.

Answer 1

Если речь идет о двух наложенных элементах 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>

Единственное, что я мог думать, что это настроить слушатель на родительском элементе запуска, который проверяет положение мыши и сравнивает его с положением элемента.