title: JQuery - Showing a div on mouseenter
body: <p>I've created the following HTML. The yellow boxes contains image thumbnails. When I mouseover a thumbnail it show a view link on top of the thumbnail.</p>
  
  <p>But if I move the mouse fast I'm getting the link div to flicker.</p>
  
  <p>Here is the code - you can copy and paste it as html and test it.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Image Gallery&lt;/title&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
  
              $('.divImage').mouseenter(function () {
                  var vl = $('#viewlink');
                  var vlpos = $(this).position();
                  vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
                  vl.fadeTo('1', 0.5);
                  vl.css('display', 'block');
              });
  
              $('.divImage').mouseleave(function (event) {
                  if (event.toElement.id != 'viewlink') {
                      var vl = $('#viewlink');
                      vl.fadeTo('1', 0.0, function () {
                          vl.css('display', 'block');
                      });
                  }
              });
  
              $('#viewlink').mouseleave(function (event) {
                  $(this).fadeTo('1', 0.0, function () {
                      $(this).css('display', 'block');
                  });
  
              });
          });        
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          .divImage
          {
              background-color: Yellow;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="viewlink" style="width: 100px; height: 30px; display: none; background-color: gray;
          text-align: center; line-height: 30px; vertical-align: middle; z-index: 1000;"&gt;
          &lt;a href="Javscript:;" style="text-decoration: underline"&gt;View&lt;/a&gt;&lt;/div&gt;
      &lt;div style="width: 398px; height: 518px; border: 1px solid #DADADA; float: left;
          overflow-y: auto; overflow-x: hidden"&gt;
          &lt;div style="width: 378px; height: 278px; margin: 10px; background-color: #FFFFFF"&gt;
              &lt;table style="margin: 0px; padding: 0px; width: 100%;" cellpadding="0" cellspacing="0"&gt;
                  &lt;tr&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="3" style="height: 20px;"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="3" style="height: 20px;"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="3" style="height: 20px;"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="3" style="height: 20px;"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td align="center"&gt;
                          &lt;div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also mouseleave is not getting called in FF 4.0. Any ideas?</p>