<!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; 40%; float: left"> <h2 style="background-color: white;">被触发的 Mouseover 事件：<span></span></h2> </div> <div class="enter" style="background-color: lightgray; padding: 20px; 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