Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Если курсор выходит за пределы блока, то не двигать следующее за ним изображение. (https://javascript.ru/forum/events/61462-esli-kursor-vykhodit-za-predely-bloka-ne-dvigat-sleduyushhee-za-nim-izobrazhenie.html)

Blondinka 19.02.2016 16:32

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

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

Blondinka 19.02.2016 17:12

Следовало поменять одну строку.
$("#my-container").mousemove(function(event) {

Проблема решена.

Deff 20.02.2016 04:29

Цитата:

Сообщение от Blondinka
изображение, кторое за ним следует, скрывается под слоем меню вверху и под другими блоками внизу.

А z-index:200000; - не поможет ?


Часовой пояс GMT +3, время: 02:41.