[Blondinka]

Добрый день. Проблема состоит в том, что если пользователь перемещает курсор мыши слишком высоко - изображение, кторое за ним следует, скрывается под слоем меню вверху и под другими блоками внизу. Хочу сделать так, чтоб изображение перестало следовать за курсором при переходе на другие блоки.

$(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>