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得到了一些带有一些jquery的卡片，以显示覆盖层在除了crome之外的所有测试的浏览器中都有效。网站是在 http://gurtyboardingcompany.com.au/如果有帮助的话。

Answer 1

这不是Chrome中的jQuery，而是你的CSS样式。

包装图像和叠加层的链接绝对位置并显示在叠加层和文本上方。

如果您将叠加层更改为绝对定位，则为其提供比链接更高的z索引，它应该可以正常工作。

修改

如果您使用Chrome检查DOM，则可以看到在fadeIn / fadeOut期间设置了不透明度值。所以我会解决造型问题。

jquery悬停不在chrome中工作

1 个答案: