jquery mouseover与mouseenter区别 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="../Packages/jQuery.1.8.3/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        x = 0;
        y = 0;
        $(document).ready(function () {
            $("div.over").mouseover(function () {
                $(".over span").text(x += 1);
            });
            $("div.enter").mouseenter(function () {
                $(".enter span").text(y += 1);
            });
        });
</script>
</head>
<body>
    <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
    <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
    <div class="over" style="background-color: lightgray; padding: 20px; width: 40%; float: left">
        <h2 style="background-color: white;">被触发的 Mouseover 事件：<span></span></h2>
    </div>
    <div class="enter" style="background-color: lightgray; padding: 20px; width: 40%; float: right">
        <h2 style="background-color: white;">被触发的 Mouseenter 事件：<span></span></h2>
    </div>
</body>
</html>

mouseleave与mouseout与之对应。

jquery中可用hover替换以上操作

        x = 0;
        y = 0;
        $(document).ready(function () {
            $("div.over").hover(
               function () { $(".over span").text(x += 1); },
               function () {$(".enter span").text(y += 1);}
            )
        });

　　

hover(enter,leave)模拟光标悬停事件,光标移到元素上触发enter，移除触发leave

hover(enter,leave)是用于替换bind("mouseenter")和bind("mouseleave"),不是用于替换bind("mouseover")和bind("mouseout")

转载：http://blog.csdn.net/ocean1010/article/details/7394599

posted on 2014-05-04 15:58  儿时精神  阅读(310)  评论(0)  编辑  收藏  举报

导航