jQuery .mousemove() с :hover

Я пытаюсь написать простой эффект предварительного просмотра при наведении. Я использую псевдокласс CSS :hover, чтобы отображалось увеличенное изображение, и jQuery .mousemove(), чтобы отслеживать положение курсора мыши. Предполагается, что увеличенное изображение появляется при наведении и следует за курсором мыши.

Проблема в том, что увеличенное изображение не исчезает, когда мышь больше не "зависает". Он будет следовать за мышью по всей странице в течение нескольких секунд, прежде чем, наконец, исчезнет. Кажется, он работает немного лучше в IE8, но не в любом другом браузере (IE8 также дает мне проблемы с позиционированием, но это другая проблема).

Любая помощь будет оценена по достоинству.

Вот код:


jquery css hover mousemove
person user1380281    schedule 01.08.2012    source источник
comment
Проверьте эту скрипту jsfiddle.net/elclanrs/jF27b   -  person elclanrs    schedule 02.08.2012

Ответы (4)


arrow_upward
1
arrow_downward

Просто дайте немного больше отступа в смещении, чтобы мышь не зависала над большим изображением. Ознакомьтесь с этим jsFiddle

 var relX = pageX - parentOffset.left +20;
 var relY = pageY - parentOffset.top+20;
person Amin Eshaq    schedule 01.08.2012
comment
+20 все еще казался немного шатким, поэтому я использовал +40, и это сработало как шарм. Спасибо! - person user1380281; 02.08.2012

arrow_upward
1
arrow_downward

Кажется, что эффект наведения просто недостаточно быстро догоняет движения мыши. Вместо того, чтобы полагаться исключительно на :hover, вам может понадобиться обратный вызов .mouseout с тайм-аутом (некоторое разумное количество... возможно, 500) для удаления изображения и .mouseover, который сбрасывает тайм-аут (вы можете сохранить тайм-аут на .data наведенного изображения -- изображение с обратным вызовом).

Я не вникал в ваш код, но вот некоторый псевдокод, чтобы объяснить, что я имею в виду

$(".big-img-that-follows-mouse").mouseout(function () {
   var $this = $(this);
   //You can also .hide() or whatever instead of .remove()
   $this.data('timeout', setTimeout(function () { $this.remove(); }), 500));
})
.mouseover(function () {
   if ($(this).data('timer') {
      clearTimeout($(this).data('timer'));
      $(this).removeData('timer');
   }
});
person Explosion Pills    schedule 01.08.2012

arrow_upward
0
arrow_downward

Я бы посмотрел на то, что этот парень сделал здесь:

Пример: http://cssglobe.com/lab/tooltip/03/ Код: http://cssglobe.com/lab/tooltip/03/main.js

person TimmyTooTall    schedule 01.08.2012

arrow_upward
0
arrow_downward

Было бы неплохо, если бы вы отформатировали свой HTML вместо того, чтобы сбрасывать его в jsfiddle одной длинной строкой.

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

person Neil    schedule 01.08.2012