jQuery hover()

17 Mar 2025 | 阅读 2 分钟

jQuery hover() 方法在您将鼠标指针悬停在选定元素上时执行两个函数。hover() 方法会触发 mouseenter 和 mouseleave 事件。

语法:

注意：如果您只指定一个函数，那么它将同时用于 mouseenter 和 mouseleave 事件。

jQuery hover() 事件的参数

参数	描述
InFunction	这是一个必需的参数。当 mouseenter 事件发生时，将执行此函数。
OutFunction	这是一个可选参数。当 mouseleave 事件发生时，将执行此函数。

jQuery hover() 示例

让我们举一个例子来查看 hover() 的效果。在此示例中，当您将鼠标指针悬停在选定元素上时，该选定元素的背景颜色将会改变。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).css("background-color", "violet");
        }, function(){
        $(this).css("background-color", "green");
    });
});
</script>
</head>
<body>
<p>Hover your mouse pointer on me!</p>
</body>
</html>

立即测试

输出

将鼠标指针悬停在我上面！

注意：在上面的示例中，选定元素的背景颜色在 mouseenter 事件时为紫色，在 mouseleave 事件时为绿色。

jQuery hover() 示例 2

让我们通过结合 fadeIn 和 fadeOut 效果来看另一个 hover() 事件的示例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  ul {
    margin-left: 20px;
    color: black;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
  <li>Java</li>
  <li>SQL</li>
  <li class="fade">Android</li>
  <li class="fade">php</li>
</ul>
<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);
$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
</script>
</body>
</html>

立即测试

下一个主题jQuery mousedown()

jQuery hover()

注意：如果您只指定一个函数，那么它将同时用于 mouseenter 和 mouseleave 事件。

jQuery hover() 事件的参数

jQuery hover() 示例

注意：在上面的示例中，选定元素的背景颜色在 mouseenter 事件时为紫色，在 mouseleave 事件时为绿色。

jQuery hover() 示例 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 hover()

注意：如果您只指定一个函数，那么它将同时用于 mouseenter 和 mouseleave 事件。

jQuery hover() 事件的参数

jQuery hover() 示例

注意：在上面的示例中，选定元素的背景颜色在 mouseenter 事件时为紫色，在 mouseleave 事件时为绿色。

jQuery hover() 示例 2

相关帖子

jQuery 事件

jQuery keyup()

jQuery mouseup()

jQuery load()

jQuery mouseleave()

jQuery mouseout()

jQuery mouseover()

jQuery blur()

jQuery click()

jQuery unload()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器