jQuery hover() 方法

使用jQuery改变鼠标悬停颜色

最新推荐文章于 2025-10-17 14:20:04 发布

转载最新推荐文章于 2025-10-17 14:20:04 发布 · 631 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

Jquery及其组件专栏收录该内容

147 篇文章

订阅专栏

本文介绍如何使用jQuery的hover方法，当鼠标指针悬停在<p>元素上时，改变其背景颜色。详细解释了hover方法的定义、用法及语法，并提供了实例代码。

实例

当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").hover(function(){
    $("p").css("background-color","yellow");
    },function(){
    $("p").css("background-color","pink");
  });
});
</script>
</head>
<body>

<p>鼠标移动到该段落。</p>

</body>
</html>

定义和用法

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件。

注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

语法

$(selector).hover(inFunction,outFunction)

调用:

$( selector ).hover( handlerIn, handlerOut )

等同以下方式：

$( selector ).mouseover( handlerIn ).mouseout( handlerOut );

注意：如果只规定了一个函数，则它将会在 mouseover 和 mouseout 事件上运行。

调用:

$(selector).hover(handlerInOut)

等同于：

$( selector ).on( "mouseover mouseout", handlerInOut );

参数	描述
`inFunction`	必需。规定 `mouseover` 事件发生时运行的函数。
`outFunction`	可选。规定 `mouseout` 事件发生时运行的函数。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

.NET跨平台

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jQuery的hover()方法是用于处理鼠标悬停事件的。下面是一篇关于jQuery hover()方法的详细文章，包含相应的源代码。

2301_79326857的博客

10-04

857

jQuery是一个流行的JavaScript库，提供了许多简化和增强JavaScript编程的功能。其中一个常用的方法是hover()方法，用于处理鼠标悬停事件。本文将详细介绍hover()方法的用法，并提供相应的源代码示例。hover()方法是一个用于处理鼠标悬停事件的快捷方式。通过这个简单的示例，你可以看到hover()方法如何方便地处理鼠标悬停事件。类名的元素，并使用hover()方法将鼠标进入和离开事件绑定到这些元素上。来引用当前离开的元素，并将其背景颜色更改为红色。来引用当前悬停的元素，并使用。

jQuery hover事件简单实现同时绑定2个方法

10-22

在jQuery中，可以通过传递两个函数作为参数给hover方法，从而分别在鼠标进入和离开元素时触发这两个函数。在示例代码中： ```javascript $(document).ready(function(){ $("#orderedlistli").hover( function(){...

参与评论您还未登录，请先登录后发表或查看评论

jQuery hover() 方法完全指南：掌握鼠标悬停交互

最新发布

weixin_42107409的博客

10-17

793

jQuery hover()方法详解：从基础到高级应用摘要：jQuery的hover()方法是一个整合mouseenter和mouseleave事件的便捷函数，用于创建丰富的交互效果。文章系统介绍了hover()的两种语法形式（单函数和双函数），通过对比原生事件突出其优势。基础应用包括样式修改、元素显隐、类名切换等常见场景，高级应用则涵盖动画过渡、3D效果、图片画廊及多级导航菜单等复杂交互。文中提供了大量代码示例，从简单悬停效果到平滑动画过渡，再到交互式导航实现，完整展示了hover()方法的实际应用技巧

jQuery中的hover()方法

qq_1724201421的博客

04-15

9031

jQuery中的hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter），当光标移出这个元素时，会触发指定的第二个函数（leave）。如下面一段代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <tit

jQuery hover方法

金溪的博客

07-27

707

语法 $(selector).hover(inFunction,outFunction) 调用: $( selector ).hover( handlerIn, handlerOut )( selector ).hover( handlerIn, handlerOut ) 等同以下方式： $( selector ).mouseover( handlerIn ).mouseout( h...

jQuery hover()方法和jQuery toggle()方法用法示例

08-21

710

jQuery hover()方法和jQuery toggle()方法是两个合成事件，类似ready()方法，都属于jQuery自定义的方法。下面来讲解这两个方法的属性和如何使用。一、hover()方法：语法结构为： hover(enter,leave)。用于模拟光标悬停事件。当光标移动到目标元素上时，会触发指定第1个函数(enter);当移出这个元素时，会触发第2个函数(leave)。前端

jquery hover鼠标悬停到图文列表时滑动图片切换

11-17

"jquery hover鼠标悬停到图文列表时滑动图片切换"这个主题涉及到了jQuery中的`hover`事件以及动态改变图片显示的技巧。下面我们将详细探讨这些知识点。一、jQuery `hover`事件 `hover`是jQuery中的一个复合事件，...

Jquery的hover方法让鼠标经过li时背景变色

10-26

标题中的“Jquery的hover方法让鼠标经过li时背景变色”是指在使用JavaScript库jQuery时，通过调用hover方法来实现当鼠标悬停在HTML列表元素`<li>`上时，改变其背景颜色的效果。这个功能在创建交互式用户界面时非常...

jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片

11-02

在本文中，我们将深入探讨如何使用jQuery的hover事件来创建一个独特的心形图片墙，当鼠标悬浮在图片上时，会产生动态效果。首先，我们需要理解jQuery库的基本概念以及hover事件的工作原理。 jQuery是一个广泛使用的...

jquery中hover方法

霖霂晗的专栏

03-18

766

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。该方法触发 mouseenter 和 mouseleave 事件。 html代码：今生因你痴狂。此爱天下无双。js 代码第一种方法用hover() $(document).ready(function(){ $("p").hover(function() { $("p").css('back

jQuery里好用的hover()方法

Qiustion的专栏

12-23

1002

hover([over],out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

jQuery中的hover事件

weixin_44540247的博客

06-10

7103

在我们之前学习前端的过程中了解到了很多代码的作用，特别是js中所使用的方法，我之前也介绍过很多实用的js方法，今天要给大家介绍的是jQuery中的一个比较特殊的一个方法：hover()。先前说过，我们在编程的时候最不想看到的结果是方法效果实现了，但是代码量却出乎意料的繁杂、量大，所以在写代码的时候通常会使用一些插件或者是特殊方法尽量简写代码，而jQuery就是用于书写方便，简写代码的插件。尽管使...

JQuery的hover函数

agoodchild的专栏

04-15

1427

$('#nw').hover( function(){$(this).css('background','#000')}, //鼠标移入 function(){$(this).css('background','#CCC')} //鼠标移出 ); hover(over,in)，其中over是鼠标移入的函数，in是鼠标移出的函数。

jquery中hover()方法的学习

09-13

578

鼠标移动的一个特效： ul { margin-left:20px; color:blue; } li { cursor:default; } span { color:red; } Milk Bread Chip

jQuery.hover() 函数详解

evilcry2012的专栏

07-31

1837

hover()函数用于为每个匹配元素的hover事件绑定处理函数。 hover事件就是鼠标悬停事件。此外，你还可以额外传递给事件处理函数一些数据。此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发hover事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。要删除通过hover()绑定的事件，请使用unbind()函数。该函数属于jQ

jQuery 的hover方法

JeremyYan的博客

04-18

1769

.hover() 是一个鼠标悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修

jQuery的hover事件

weixin_48047636的博客

05-16

1530

<body> <div id="d1"> <div id="d2"> <div id="d3"></div> </div> </div> <script src="../jquery-1.8.3.min.js"></script> <script> /* $("#d1").mouseov

jquery中的hover方法教程—明河谈jquery

cui_angel的专栏

07-26

3106

jQuery中的hover方法是个非常常用的方法，接受二个参数，第一个参数为鼠标移入对象时触发的事件，第二个参数为鼠标移出对象时触发的事件。很多人误以为hover()是mouserover和mouseout的结合体，实际上不是。 hover = mouseenter+mouseleave mouseenter和mouseleave这二个事件，jquery新手应该会觉得很陌生，