<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script>
x = 0;
y = 0;
$(document).ready(function(){ $("div.over").mouseout(function(){ $(".over span").text(x += 1); });
$("div.enter").mouseleave(function(){ $(".enter span").text(y += 1); });
});
</script>
</head>
<body>
<p>当鼠标指针离开任何子元素以及所选元素时，将触发 mouseout 事件。</p>
<p>mouseleave 事件仅在鼠标指针离开所选元素时触发。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
<h3 style="background-color:white;">Mouseout 事件触发：<span></span></h3>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
<h3 style="background-color:white;">Mouseleave 事件触发：<span></span></h3>
</div>
</body>
</html>