jquery 在线编辑器 | jquery代码测试

<!DOCTYPE html>
<html>
<head>
<style>div {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  float: left;
  padding: 30px;
  text-align: center;
  background-color: lightgray;
}
h3 {
  background-color: white;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script>
var x = 0;
var y = 0;
var z = 0;
$(document).ready(function(){
  $("div.over").mouseover(function(){
    $(".over span").text(x += 1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter span").text(y += 1);
  });
  $("div.move").mousemove(function(){
    $(".move span").text(z += 1);
  });
});
</script>
</head>
<body>

<h3>此示例演示 mousemove、mouseenter 和 mouseover 之间的区别。</h3>

<p>mouseover 事件在鼠标指针进入 div 元素及其子元素时触发。</p>
<p>mouseenter 事件仅在鼠标指针进入 div 元素时触发。</p>
<p>每次鼠标指针移到 div 元素上时都会触发 onmousemove 事件。</p>

<div class="over">
  <h3>Mouseover 事件触发：<span></span></h3>
</div>

<div class="enter">
  <h3>Mouseenter 事件触发：<span></span></h3>
</div>

<div class="move">
  <h3>Mousemove 事件触发: <span></span></h3>
</div>

</body>
</html>

报个问题: