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悬停不工作在铬

回答

相关问题