title: mouseleave 2 elements show/hide 1 element?
body: <p>I have 2 elements a <code>&lt;ul&gt;</code> and a <code>&lt;div&gt;</code>.</p>
  
  <p>If I hover over the div I want the ul to appear and when I mouseleave the div I want to check if the mouse is over the ul, if not I want to hide the ul again.</p>
  
  <p>This is my code it works in Chrome and safari but not in Firefox does anyone know what might cause this bug?</p>
  
  <pre><code>$('.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();
              }
          );
      });
  </code></pre>
  
  <p><strong>EDIT</strong>
  HTML markup</p>
  
  <pre><code>&lt;div id="main-wrapper"&gt;
  
      &lt;div class="clearfix" id="main"&gt;
  
          &lt;div class="column" id="content"&gt;
  
              &lt;div class="section"&gt;
  
                  &lt;h1 id="page-title" class="title"&gt;Titletest&lt;/h1&gt;
  
                  &lt;div class="region region-content"&gt;
  
                      &lt;div class="block" id="block-system-main"&gt;
  
                          &lt;div class="content"&gt;
  
                              &lt;div typeof="sioc:Item foaf:Document" class="node" id="node-13"&gt;
  
                                  &lt;ul id="date" style="display: none;"&gt;
  
                                  &lt;/ul&gt;
  
                              &lt;/div&gt;&lt;!-- /.node --&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;&lt;!-- /.block --&gt;
  
                  &lt;/div&gt;&lt;!-- /.region --&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- /.section, /#content --&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>Ok, thanks to crowicked I came to my desired effect, this is the code for the people who are interested.</p>
  
  <pre><code>$('.footer').hover(
      function()
      { 
          $('ul#date').stop();
  
          if ($('ul#date:hidden'))
          { 
              $('ul#date').fadeIn();
          }
  
      }
  );
  
  $('ul#date').mouseleave( function(){ $('ul#date').fadeOut(); });
  </code></pre>