DIV 내가 스크립트를 통해 간단한 가져가이 요소

Question

을 트리거의 자식 요소가 아닌 경우 유혹 할 때 div의 가시성을 유지 : 모두 div의 겹쳐하지만

$('#loginbutton').hover(
    function() { 
    $('#loginform').stop().fadeIn('fast'); 
    }, 
    function() { 
    $('#loginform').stop().fadeOut('fast'); 
    } 
); 

불행하게도, #loginform이 #loginbutton의 아이가 아니다.

마우스가 #loginbutton으로 이동하고 #loginform을 움직이면 #loginform의 표시 여부를 유지할 수 있습니까?

는 바이올린 : http://jsfiddle.net/P4sxH/

Answer 1

A는 해키 비트하지만 난 그것을 찾은 것 같아 :

http://jsfiddle.net/P4sxH/2/

$('#loginform').hover(
    function() { 
    $('#loginform').stop().fadeIn('fast'); 
    }, 
    function() { 
    $('#loginform').stop().fadeOut('fast'); 
    } 
); 

$('#loginbutton').hover(
    function() { 
    $('#loginform').stop().fadeIn('fast'); 
    }, 
    function() { 
    $('#loginform').stop().fadeOut('fast'); 
    } 
); 

Answer 2

타이머를 사용

$('#loginbutton').hover(
    function() { 
     $('#loginform').stop().fadeIn('fast'); 
    }, 
    function() { 
     var timer = setTimeout(function(){ 
      $('#loginform').stop().fadeOut('fast'); 
     }, 200); 
     $('#loginform').data('hidetimer', timer) 
    } 
); 

$('#loginform').hover(function(){ 
    clearTimeout($(this).data('hidetimer')); 
}, function(){ 
    $(this).stop().fadeOut('fast'); 
}) 

데모 : Fiddle