Question

我无法让moues进入鼠标离开功能工作。我知道我可以选择.hover选项，我希望在进入之前让mouseenter / mouseleave正常工作。

我所看到的是，我打开了chrome并正在检查img，它说src文件正在改变，但我没有看到明显的变化。有人可以帮忙吗

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.4.3.min.js" type="text/javascript"></script>


</head>
<body>

            <img id="menuHome" src="m_home.gif" />
                <script type="text/javascript">

                    $(document).ready(function() {
                        $("#menuHome").mouseenter(function() {
                            $(this).attr({ src: 'm_home_roll.gif' });
                        });
                        $("#menuHome").mouseleave(function() {
                            $(this).attr({ src: 'm_home.gif' });
                        });
                    });
    </script>

</body>
</html>

Answer 1

我认为Chrome有类似的问题，我似乎记得使用mouseover和mouseout代替。所以像这样：

$(document.ready(function() {
    $('#menuHome')
        .mouseover(function() {
            $(this).attr({src: 'm_home_roll.gif'});
        })
        .mouseout(function() {
            $(this).attr({src: 'm_home.gif'});
        });
});

也无需选择元素两次（因此单$('#menuHome')行）。

Answer 2

这可能不是原因，但您可以尝试使用略有不同的语法吗？

$(document).ready(function() {
    $("#menuHome").hover(function() {
        this.src = 'm_home_roll.gif';
    }, function() {
        this.src = 'm_home.gif';
    });
});

Answer 3

如果您确定这些图像的uri是正确的并且您在翻转/滚动时等待适当的时间来加载它们（第一次，通常它们会在之后缓存）然后切换{ {1}}到$(document).ready()并查看它是否效果更好？

Answer 4

由于没有人探究过这个问题，我猜测一下。正如我对OP所评论的那样，它可能与您在更改源代码后解除绑定的事件有关。要验证这一点，您可以在两个事件中放置一个断点或放置一个警告语句。每当你翻滚并且没有弹出警报时，这意味着你的事件会以某种方式被绑定。

鉴于此，请尝试：

$(document).ready(function() {
    $("#menuHome").live('mouseenter', function() {
        $(this).attr({ src: 'm_home_roll.gif' });
    });
    $("#menuHome").live('mouseleave', function() {
        $(this).attr({ src: 'm_home.gif' });
    });
});

看看它是否正在将元素读入DOM。如果这不起作用，请尝试：

function enter() {
    $(this).attr({ src: 'm_home_roll.gif' });
    readd();
}
function leave() {
    $(this).attr({ src: 'm_home.gif' })
    readd();
}

// can't refer to function handler while inside function
function readd(elem) {
    $('#menuHome').unbind().mousenter(enter).mouseleave(leave);
}

$(document).ready(function() {
    $("#menuHome").mouseenter(enter).mouseleave(leave);
});

Answer 5

我不知道您是否对代码结构更改持开放态度，但我会编写如下代码：

<script type="text/javascript">
$(document).ready(function(){`
    $('#rolloverImg').html("<img src=\"...\">");`

    $('#rolloverImg').hover(function(event){
       $(this).html("<img src=\"...new src...\">");
    }, function(event){
       $(this).html("<img src=\"...old src...\">");
    });
});
</script>

....
<div id="rolloverImg"></div>

jquery mouseenter老鼠离开

5 个答案: