📌  相关文章
📜  jQuery | mouseenter() 与示例(1)

📅  最后修改于: 2023-12-03 15:02:13.907000             🧑  作者: Mango

jQuery | mouseenter() 与示例

mouseenter() 是 jQuery 中的一个事件函数，当鼠标进入（穿过）元素时会触发该事件，并且只会触发一次，与 mouseover() 不同，mouseover() 会在子元素中移动时一直触发。

下面是一个例子，当鼠标进入 div 元素时，会改变其背景色：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    $("div").mouseenter(function() {
      $(this).css("background-color", "red");
    });
  </script>
</body>
</html>

以上代码中，$() 函数用来选取 div 元素并设置鼠标进入时的事件处理函数。在其它事件触发时，可以使用 mouseleave() 函数进行处理。

在实际开发中，mouseenter() 通常用来实现鼠标悬停提示、图片缩放等交互效果。

更多关于 mouseenter() 的用法和示例可以查看官方文档：jQuery | mouseenter()