mouseleave 2個元素顯示/隱藏1個元素？

Question

我有2個元素a <ul>和<div>。

如果我將鼠標懸停在div上我希望ul出現，當我mouseleave div時我想檢查鼠標是否超過ul，如果不是，我想再次隱藏ul。

這是我的代碼，它適用於Chrome瀏覽器和Safari瀏覽器，但不是在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> 

SOLUTION

好，感謝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元素，只是使用.hover()功能上.footer顯示/隱藏<ul>？

編輯： 添加了drupal標記。 嘗試類似這樣：

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

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

Answer 2

不是這樣嗎？

$('.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();   
     } 
    ); 
});