title: jquery hover not working in chrome
body: <pre><code>        &lt;ul class="top"&gt;
              &lt;li&gt;
                  &lt;span class="card flipped"&gt;
                      &lt;span class="front face"&gt;
                          &lt;a href="&lt;?php echo site_url("about") ?&gt;" class="link"&gt;
                              &lt;img src="&lt;?php echo base_url();?&gt;img/about.jpg" alt="" /&gt;
                              &lt;div class="overlay"&gt;&lt;p&gt;ABOUT&lt;br/&gt;US&lt;/p&gt;&lt;/div&gt;
                          &lt;/a&gt;
                      &lt;/span&gt;
                      &lt;span class="back"&gt;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/li&gt;&lt;/ul&gt;
  
  
  &lt;script  type="text/javascript"&gt;
  $(document).ready(function() {
  //On mouse over those thumbnail
  $('.card').hover(function() {
  //Display the caption
  $(this).find('.overlay').stop(false,true).fadeIn(400);
  },
  function() {
      //Hide the caption
      $(this).find('.overlay').stop(false,true).fadeOut(800);
  });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>iv got a few of these cards with some jquery to show the overlay works in all browsers iv tested except crome.
  site is at
  <a href="http://gurtyboardingcompany.com.au/" rel="nofollow">http://gurtyboardingcompany.com.au/</a> if that helps.</p>