logo标签列表

jQuery mouseenter和mouseleave事件

.netjquery
3

我在使用鼠标进入和离开功能时遇到了问题。我知道有一个.hover选项可以使用，但我想先将mouseenter/mouseleave功能实现。

我看到的情况是，我打开了Chrome并检查了图像，它显示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>
100%确定图像是不同的，在初始滚动后的资源选项卡中，Chrome确实请求m_home_roll.gif。 - george9170
它在IE和FireFox中都正常工作。 - george9170
1
更改源代码时，这些事件是否可能被清除？为了保持清醒，请尝试在加载src后重新绑定事件。 - shoebox639
当我尝试使用hover事件时，同样的事情发生了。它在Chrome中第一次工作，但其他时间都不起作用。而且在IE和Firefox中完美地工作。以下是代码： $("#menuHome").hover( function() { $(this).attr({ src: 'm_home_roll.gif' }); } ,function(){ $(this).attr({ src: 'm_home.gif' }); }); }); - george9170
从您的代码中我可以看出，您正在尝试进行简单的图像翻转。您应该考虑使用CSS精灵来实现这一点，因为它a）速度更快，b）即使禁用了JavaScript也可以工作。http://www.alistapart.com/articles/sprites - dmackerman
显示剩余7条评论
5个回答
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')代码）。

是的，看起来 mouseenter 和 mouseleave 可能是特定于 Internet Explorer 的：https://dev59.com/pnNA5IYBdhLWcg3wEZeT - Tom
0

这可能不是原因，但你可以尝试使用稍微不同的语法吗？

$(document).ready(function() {
    $("#menuHome").hover(function() {
        this.src = 'm_home_roll.gif';
    }, function() {
        this.src = 'm_home.gif';
    });
});
尝试了不同的语法，但没有帮助。我更喜欢这种语法。为什么你不需要包含 $(this)？ - george9170
2
在处理函数内，“this”指的是DOM元素。您可以通过将其包装在“$（）”中来对其执行jQuery操作，但是您可以在“this”上访问普通的Javascript元素方法和属性。这样始终会有更好的性能表现。 - lonesomeday
0

既然没有人探索过这个问题，我猜测一下。正如我对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);
});
一种更好的测试方法是使用 delegate：$(document.body).delegate('#menuHome', 'mouseenter', function(){this.src='m_home_roll.gif';}).delegate('#menuHome', 'mouseleave', function(){this.src='m_home.gif';}); - lonesomeday
哈哈，我不得不查一下live和delegate的区别。我相信它们在这里都是有效的。 - shoebox639
0

我不知道你是否愿意接受代码结构上的改变，但是我会编写如下的代码：

<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>
0

如果您确定这些图像的URI是正确的，并且在您滚动/滚动时等待适当的加载时间（通常情况下，它们会在此之后缓存），那么请将$(document).ready()切换为$(window).load()，看看是否效果更好？

$(window).load()似乎具有相同的行为 $(window).load( function() { $("#menuHome").hover(function() { this.src = 'm_home_roll.gif'; }, function() { this.src = 'm_home.gif'; }); });还有其他人遇到上面代码的问题吗？ - george9170
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接