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>

我有一个网站，当用户将鼠标悬停在首页上的某个块上时，它使用jQuery显示内容。到目前为止，它一直很好用，它刚刚停止在Chrome中工作。所有其他浏览器似乎仍然正常工作。

实际网站为globalgeneration.co.uk

Answer 1

从原帖的评论中回答：

jQuery悬停实际上正常工作（淡入淡出元素）。

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

在这种情况下，请确保其父级position: relative; <{1}}

Answer 2

我遇到类似$(menu).hover(funin,funout)的问题，其中菜单为<div><ul>...，使用position:absolute。

在funout中查看event.target，结果显示在FF中它是ul，而在Chrome中则是div（在两种情况下this都是{{ 1}}）。

不确切知道原因，但设置div会修复它：在这两种情况下$("ul", menu).hover(funin,funout)现在都是一样的;看起来它与Chrome处理mouseleave事件目标的方式有关...

HTH，JM2CW。

Answer 3

我测试了你的代码并且它有效....

但还有另一种选择，这应该有效：

jQuery(".front_hover").live("hover",

function () {
//Do something
});

或者这样：

    $("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});

jQuery .hover无法在Chrome中运行

3 个答案: