jQuery .mousemove() with : hover

Question

간단한 호버 미리보기 효과를 작성하려고합니다. 큰 이미지를 표시하려면 CSS : hover 의사 클래스를 사용하고, 마우스 커서의 위치를 ​​추적하려면 jQuery .mousemove()를 사용하고 있습니다. 큰 이미지는 호버에 표시되고 마우스 커서를 따라야합니다.

마우스가 더 이상 마우스를 가리 키지 않으면 더 큰 이미지가 사라지지 않는 것이 문제입니다. 마침내 사라지기 전에 몇 초 동안 페이지 전체에 마우스를 따라갈 것입니다. 그것은 IE8에서 조금 더 나아 보이지만, 다른 브라우저에서는 그렇지 않습니다 (IE8은 또한 포지셔닝 문제를 내포하고 있지만 다른 문제입니다).

도움을 주시면 감사하겠습니다.

Here's the code :

Answer 1

가 그냥 있도록 오프셋에 좀 더 패딩을주는 마우스가 큰 이미지 위로 마우스를 올려 놓지 않습니다. 호버 효과는 단지 충분히 빠른 마우스 움직임 잡을하지 않는 것 같습니다이 jsFiddle

var relX = pageX - parentOffset.left +20; 
var relY = pageY - parentOffset.top+20; 

Answer 2

나는이 사람이 여기에 무슨 짓을했는지 살펴 것 :

예 : http://cssglobe.com/lab/tooltip/03/ 코드 : http://cssglobe.com/lab/tooltip/03/main.js

Answer 3

를 확인하십시오. :hover에만 의존하는 대신, 이미지를 제거하는 데 시간 초과 (아마 500 만)가있는 .mouseout 콜백과 시간 초과를 재설정하는 .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'); 
    } 
}); 

Answer 4

대신 jsfiddle로 덤핑의 당신의 HTML 포맷 더라면 그것은 좋았을 것이다 하나의 긴 문자열에.

어쨌든 문제는 큰 이미지가 목록 안에 중첩되어 있기 때문에 마우스를 올려 놓을 때도 원래 항목을 계속 움직일 수 있습니다.