クロムでjquery hoverが機能しない

Question

 <ul class="top"> 
      <li> 
       <span class="card flipped"> 
        <span class="front face"> 
         <a href="<?php echo site_url("about") ?>" class="link"> 
          <img src="<?php echo base_url();?>img/about.jpg" alt="" /> 
          <div class="overlay"><p>ABOUT<br/>US</p></div> 
         </a> 
        </span> 
        <span class="back"></span> 
       </span> 
      </li></ul> 


<script type="text/javascript"> 
$(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); 
}); 

}); 
</script> 

iv crome以外のすべてのブラウザでオーバーレイが動作することを示すためにjqueryでこれらのカードをいくつか取得しました。それが役立つ場合、 サイトは http://gurtyboardingcompany.com.au/にあります。

Answer 1

これはChromeで壊れているjQueryではなく、CSSのスタイリングです。

イメージとオーバーレイをラップするリンクは絶対的な位置であり、オーバーレイとテキストの上に表示されます。

オーバーレイを絶対的に配置するように変更し、リンクよりも高いz-インデックスを与えると、それが機能するはずです。

編集

あなたがChromeでDOMを検査する場合は、不透明度の値は、フェードイン/フェードアウト時に設定されていることがわかります。だから私はスタイリングの問題を修正するだろう。