jquery懸停不工作在鉻

 <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有幾個這些卡與一些jquery顯示覆蓋作品在所有瀏覽器iv測試除了crome。網站是在 http://gurtyboardingcompany.com.au/如果有幫助。jquery懸停不工作在鉻

來源

2012-03-23 Mitchell Bray

它不是在Chrome中被破解的jQuery，而是你的CSS樣式。

包裹圖像和疊加層的鏈接絕對是位置並出現在疊加層和文本上方。

如果您將覆蓋層更改爲絕對定位，那麼給它一個比鏈接更高的z-index，它應該可以工作。

編輯

如果您檢查與Chrome瀏覽器的DOM，你可以看到，不透明度值淡入/淡出期間被設置。所以我會解決樣式問題。

來源

2012-03-23 10:05:31

jquery懸停不工作在鉻

回答

相關問題