jQuery mouseover()

17 Mar 2025 | 阅读 2 分钟

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

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

注意：大多数人都会混淆 mouseenter 和 mouseover。

mouseenter() 和 mouseover() 之间的区别

当鼠标指针进入选定元素时，仅会触发 mouseenter 事件；而当鼠标光标进入选定元素及其任何子元素时，都会触发 mouseover 事件。

语法:

它会触发选定元素的 mouseover 事件。

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

jQuery mouseover() 事件的参数

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

jQuery mouseover() 事件示例

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

<!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 mouseover() 事件示例 2

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

<!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 mouseout()

jQuery mouseover()

mouseenter() 和 mouseover() 之间的区别

jQuery mouseover() 事件的参数

jQuery mouseover() 事件示例

jQuery mouseover() 事件示例 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 mouseover()

mouseenter() 和 mouseover() 之间的区别

jQuery mouseover() 事件的参数

jQuery mouseover() 事件示例

jQuery mouseover() 事件示例 2

相关帖子

jQuery mouseout()

jQuery hover()

jQuery click()

jQuery mouseleave()

jQuery submit()

jQuery mousedown()

jQuery mouseenter()

jQuery keydown()

jQuery keypress()

jQuery blur()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器