mouseleave 2 개 요소 표시/숨기기 1 개 요소?

Question

나는 두 개의 원소 인 <ul>과 <div>을 가지고있다.

div 위로 마우스를 가져 가면 ul이 나타나기를 원하고 div를 mouseleave 할 때 마우스가 ul보다 큰지 확인하고 싶지 않은 경우 ul을 다시 숨기려고합니다.

이것은 크롬과 사파리에서 작동하지만 Firefox에서는 작동하지 않는 사람이이 버그의 원인을 알고 있습니까?

$('.footer') 
    .mouseenter(function() { 
     $('ul#date').fadeIn(); 
    }) 
    .mouseleave(function(){ 
     $('ul#date').hover(
      function() { 
       $('ul#date').mouseleave(function() { 
        $('.footer').hover(
         function() { 
          return; 
         }, 
         function() { 
          $('ul#date').fadeOut(); 
         } 
        ); 
       }); 
      }, 
      function() { 
       $('ul#date').fadeOut(); 
      } 
     ); 
    }); 

편집 HTML 마크 업

<div id="main-wrapper"> 

    <div class="clearfix" id="main"> 

     <div class="column" id="content"> 

      <div class="section"> 

       <h1 id="page-title" class="title">Titletest</h1> 

       <div class="region region-content"> 

        <div class="block" id="block-system-main"> 

         <div class="content"> 

          <div typeof="sioc:Item foaf:Document" class="node" id="node-13"> 

           <ul id="date" style="display: none;"> 

           </ul> 

          </div><!-- /.node --> 

         </div> 

        </div><!-- /.block --> 

       </div><!-- /.region --> 

      </div> 

     </div><!-- /.section, /#content --> 

    </div> 

</div> 

<div class="footer"></div> 

솔루션 내 원하는 효과에 와서 crowicked하는

좋아, 덕분에,이 관심이있는 사람들을위한 코드입니다.

$('.footer').hover(
    function() 
    { 
     $('ul#date').stop(); 

     if ($('ul#date:hidden')) 
     { 
      $('ul#date').fadeIn(); 
     } 

    } 
); 

$('ul#date').mouseleave(function(){ $('ul#date').fadeOut(); }); 

Answer 1

왜 ul#date 내부 .footer 요소를 묶지 단지/표시 할 수 .footer에 .hover() 기능을 사용할 수 있습니까?

편집 : drupal 태그가 추가되었습니다. 다음과 같이 입력하십시오 :

$('.footer').hover(
    if ($('ul#date').is(':hidden')) { 
     function(){ 
     $('ul#date').fadeIn(); 
     } 
    } 
); 

$('ul#date').mouseleave(function(){ 
    $('ul#date').fadeOut(); 
}); 

Answer 2

아니겠습니까? <ul>을 숨길

$('.footer').mouseenter(function(){  
    $('ul#date').fadeIn();  
}).mouseleave(function(){  
    $('ul#date').hover(function(){   
     $('ul#date').mouseleave(function(){    
      $('.footer').hover(function(){     
       return;     
      }, function() {     
       $('ul#date').fadeOut();    
      });   
     }, function(){   
      $('ul#date').fadeOut();   
     } 
    ); 
});