마우스가 움직여서 div 위로 마우스를 가져 가면 콘텐츠가 희미 해집니다.

Question

마우스가 움직일 때 (Google의 홈페이지와 비슷한 방식으로) 콘텐츠가 희미 해 지려고하는데, 마우스 커서가 움직일 때이 동작을 방지하고 싶습니다. 특정 div 이상.

여기에 기본을의이 성공적으로 내용에 페이드

$("html").hover(function() { 
    $("#navigation, #content").fadeIn("slow"); 
}); 

합니다. 커서가 특정 요소 위에 있지만 효과가없는 것을 감지하려고했습니다. 이것이 내가 가진 것입니다 :

$("html").one("mousemove", function() { 
    if (mouseover == false) { 
     $("#navigation, #content").fadeIn("slow"); 
    } 
}); 

var mouseover = false; 
$('#hero').mouseenter(function() { 
    mouseover = true; 
}).mouseleave(function() { 
    mouseover = false; 
}); 

여기에있는 것보다 더 좋은 방법이있을 수 있습니까?

Answer 1

hero 요소의 mousemove 핸들러에서 jQuery의 stopPropagation() 메소드를 사용해보십시오. 그러면 이벤트가 더 일반적인 기능에 의해 처리되는 문서 수준까지 버블 링되지 않도록해야합니다.

나는 개인적으로이 일을 해 본 적이 없지만, 자바 스크립트에서 이벤트 버블 링에 대한 나의 이해와 stopPropagation() 메소드의 목적은 정확히 이것을 수행해야한다는 것입니다.

Answer 2

$ ('html')이 아닌 $ (document)를 사용해보십시오.이 요소는 숨겨져 있기 때문에 마우스의 x 및 y를 요소 위로 가져 가면 마우스의 x가 크거나 같으면 요소의 x와 폭보다 작거나 같은 x, y에 대한 동일한 논리를 표시합니다.

이벤트를 취소해야하므로 unbind()를 사용하십시오. 좋아

Answer 3

그래서 파이어 폭스에서이 작업이 :

var overHero = false; 
$('#hero').mouseover(function() { 
    overHero = true; 
}).mouseleave(function(){ 
    overHero = false; 
}); 

$('html').mousemove(function() { 
    if (overHero == false) { 
     $("#navigation, #content").fadeIn("slow"); 
    } 
}); 

을 ...하지만 크롬에서 작동하지 않습니다. 마우스가 움직이는 지 여부에 관계없이 Chrome은 #content에서 곧바로 사라집니다. 마우스가 #hero 요소 위에 있으면 페이드 인하지 않습니다 (올바른 것입니다).