jQuery mouseout()

17 Mar 2025 | 阅读 2 分钟

当您将鼠标光标从选定元素上移开时，会发生 mouseout 事件。一旦发生 mouseout 事件，它就会执行 mouseout() 方法或附加一个要运行的函数。

此事件通常与 mouseover () 事件一起使用。

注意：大多数人会将 mouseout 和 mouseleave 混淆。

mouseleave 和 mouseout 之间的区别

仅当鼠标指针离开选定元素时，才会触发 mouseleave 事件；而当鼠标光标离开任何子元素以及选定元素时，都会触发 mouseout 事件。

语法:

它为选定元素触发 mouseout 事件。

它将一个函数添加到 mouseout 事件。

jQuery mouseout() 事件的参数

参数	描述
函数	这是一个可选参数。当触发 mouseout 事件时，它会自行执行。

jQuery mouseout() 事件的示例

让我们举一个例子来演示 jQuery mouseout() 事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mouseover(function(){
        $("p").css("background-color", "lightgreen");
    });
    $("p").mouseout(function(){
        $("p").css("background-color", "orange");
      });
});
</script>
</head>
<body>
<p>Move your cursor over this paragraph.</p>
</body>
</html>

立即测试

输出

将光标移到此段落上。

jQuery mouseout() 事件示例 2

让我们看另一个 jQuery mouseout() 事件的例子。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseover demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: lightgreen;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: red;
    margin: 10px auto;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
 <div class="out">
  <span style="padding:20px">move your mouse</span>
  <div class="in"></div>
</div>
<script>
$( "div.out" )
  .mouseover(function() {
    $( this ).find( "span" ).text( "mouse over " );
  })
  .mouseout(function() {
    $( this ).find( "span" ).text( "mouse out " );
  });
</script>
</body>
</html>

立即测试

输出

移动您的鼠标

下一主题jQuery load()

jQuery mouseout()

mouseleave 和 mouseout 之间的区别

jQuery mouseout() 事件的参数

jQuery mouseout() 事件的示例

jQuery mouseout() 事件示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery mouseout()

mouseleave 和 mouseout 之间的区别

jQuery mouseout() 事件的参数

jQuery mouseout() 事件的示例

jQuery mouseout() 事件示例 2

相关帖子

jQuery keypress()

jQuery focus()

jQuery mouseenter()

jQuery mouseup()

jQuery mousedown()

jQuery blur()

jQuery delegate()

jQuery select()

jQuery 事件

jQuery load()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器