У меня есть несколько прозрачных элементов, наложенных на элемент, на котором мне нужно обнаружить указатель мыши. Я устал от регулярных .hover, .mouseover и .mouseenter методов, но они работают только с элементами, находящимися сверху. Можно ли это сделать или я должен реорганизовать мое css?
Представление моей проблемы: HTML
<html>
<body>
<button id="hidered" type="button">
Hide red box
</button>
<br><br>
<div class="conatiner">
<div class="box" id="box1">
</div>
<div class="box" id="box2">
</div>
</div>
</body>
</html>
CSS
.box {
position: absolute;
height: 200px;
width: 200px;
}
.container {
position: relative;
}
#box1{
background-color: green;
}
#box2{
background-color: red;
}
JS
$( "#box1" ).hover(function() {
alert( "Successfull");
});
$( "#hidered" ).click(function() {
$( "#box2" ).hide();
});
JQuery необходимо
JSfiddle: https://jsfiddle.net/701yzkux/1/
Вы можете попробовать, что зависание над зеленой скрытой коробкой выиграло не вызывать метод .hover. Вы также можете попробовать нажать кнопку, которая скроет красное поле над зеленым. После этого метод .hover будет работать нормально, потому что элемент находится сверху.