不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。
只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$("#id_span").text(x+=1);
});
$("div.enter").mouseenter(function(){
//$(".enter span").text(y+=1);
$("#id_span2").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 id="id_span"></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被觸發的 Mouseenter 事件：<span id="id_span2"></span></h2>
</div>
</body>
</html>在同一個空間中mouseover優先於mouseenter執行。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="lib/jquery.js"></script>
<script src="js/example_action.js"></script>
<title>Untitled Document</title>
<script>
var x = 0;
$(document).ready(function(){
$("button").focus(function(){
$("button").css("background-color", "red");
});
$("button").mouseover(function(){
$("#message").append("mouseover\n");
$("button").css("background-color", "blue");
});
$("button").mouseenter(function(){
$("#message").append("mouseenter\n");
$("button").css("background-color", "yellow");
});
$("button").click(function(){
$("#message").append("button click!\n");
});
$("button").dblclick(function(){
$("#message").append("button dblclick!\n");
});
$("#id_div").mouseover(function(){
$("#message").text(x+1);
});
});
</script>
</head>
<body>
<p>This is example action</p>
<p id="message"></p>
<button type="button">focus me red, mouse over blue, click me disapper!</button>
</body>
</html>
