title: Javascript, hover and two div's
body: <p>I've created a two divs </p>
  
  <pre><code>.video .image,  .video .hover {
      width: 315px;
      height: 125px;
      position: absolute;
      top: 0; }
  
  .video .hover {
      z-index:10;
      display:none; }
  
    &lt;div class="left"&gt;
     &lt;div class="image"&gt;
         &lt;a href="..."&gt;&lt;img src="..." height="125" width="315" /&gt;&lt;/a&gt;
     &lt;/div&gt;
      &lt;div class="hover"&gt;
         &lt;a href="..."&gt;&lt;img src="..." height="125" width="315" alt="Left"&gt;&lt;/a&gt;
     &lt;/div&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p>So one div becomes below another.</p>
  
  <p>And then I added jQuery functions: </p>
  
  <pre><code>&lt;script&gt;
  
  jQuery(".image").mouseenter(function(){
  jQuery(this).parent().find(".hover").fadeIn(100);
    jQuery(".hover").mouseleave(function(){
    jQuery(this).parent().find(".hover").fadeOut(100);});   
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>It looks like: when I hover on <code>.image</code>, .hover becomes above <code>.image</code>, then when mouse leaving <code>.hover</code>, it fades out. </p>
  
  <p>But! If mouse leaving this area faster then <code>.hover</code> become visible (in my example, faster then 100 ms), mouseleave not uses - because there is no <code>.hover</code>, so <code>.hover</code> stays over <code>.image</code>. How can i fix it?</p>
  
  <p>Thanks for each answer!</p>