jQuery .hover 在 Chrome 中不工作

Question

<div class="front_hover">
  <img class="bg_img" src="image.jpg" width="320px" height="400px"/>
    <div class="front_roll" style="display:none;">
        <!-- CONTENT HERE -->
    </div>
</div>

<script language="JavaScript" type="text/javascript">
jQuery(document).ready(function(){
    jQuery(".front_hover").hover(
    function () {
        jQuery(".front_roll", this).fadeIn(200);
    },
    function () {
        jQuery(".front_roll", this).fadeOut(200);
    });
});
</script>

我有一个站点，当用户将鼠标悬停在首页的某个 block 上时，该站点使用 jQuery 来显示内容。到目前为止它一直运行良好，它只是在 Chrome 中停止工作。所有其他浏览器似乎仍能正常工作。

实时站点是globalgeneration.co.uk

Answer 1

答案，来自对原帖的评论:

jQuery 悬停实际上工作正常(淡入和淡出元素)。

问题出在 CSS 定位上。如果您将 #content.front_content #front_top .front_roll 规则更改为具有 position: absolute，并删除 top 和 left 属性，然后它工作正常

确保它的父级有 position: relative; 在这种情况下 .front_hover { position: relative; }