Добрый день. Проблема состоит в том, что если пользователь перемещает курсор мыши слишком высоко - изображение, кторое за ним следует, скрывается под слоем меню вверху и под другими блоками внизу. Хочу сделать так, чтоб изображение перестало следовать за курсором при переходе на другие блоки.
$(function (){
$(window).mousemove(function(event) {
$('#mouse-pointer').css({
'top' : event.pageY -100 + 'px',
'left' : event.pageX -100 + 'px'
});
});
});
<style>
#my-container{
position: relative;
width:100vw;
height: 600px;
overflow-x: hidden !important;
overflow-y: hidden !important;
cursor: none;
}
</style>
<div id="my-container">
<div id="lg-top-image" data-src="img/image_above.jpg"></div>
<div id="lg-bottom-image" data-src="img/image_below.jpg"></div>
<figure id="mouse-pointer"></figure>
</div>