title: Stopping propagation on multiple hover event
body: <p>My home page contains multiple boxes.</p>
  <p>On each boxes, when <code>mouseover</code> in or out , the title disappears and the content appears.</p>
  <p>It works fine.</p>
  <p>The problem is that when mouseovering more than one box on a short period of time, it is a mess.</p>
  <pre><code>$( &quot;.views-field-wrapper&quot; ).each(function(){         
      $( this ).hover(function() {        
          $( &quot;#front_panel&quot;,this ).fadeOut(400);
          $( &quot;#back_panel&quot;,this ).delay(500).fadeIn(1000);        
        }, function(){           
          $( &quot;#back_panel&quot;,this ).fadeOut(400);
          $( &quot;#front_panel&quot;,this ).delay(500).fadeIn(1000);
      });
  });
  </code></pre>
  <p>How can I stop the previous <code>mouseover</code> reaction when mouseovering another box?</p>
  <p>EDIT :</p>
  <p>My intial code: <a href="http://jsfiddle.net/tz3d6ct6/" rel="nofollow noreferrer">http://jsfiddle.net/tz3d6ct6/</a></p>
  <p>Kumar's code that works perfectly with jquery &gt; 1.6 (I must use jquery1.4) <a href="http://jsfiddle.net/hrkf5p7w/" rel="nofollow noreferrer">http://jsfiddle.net/hrkf5p7w/</a></p>