`

jquery hover 事件

阅读更多

$("#id").hover(

function(){

   //当鼠标放上去的时候,程序处理

},

function(){

   //当鼠标离开的时候,程序处理

});

几句简单的代码,客户端下就是一个超炫的效果.看下效果图吧.

图片颜色明显失真了.但效果基本还是能看出来的. 上面这张图片中.我的鼠标正好在第 [主题] 上

当鼠标放到 [编辑] 链接上,就马上会出现 [主题] [问题] 俩个链接.当鼠标移去.又回到了 [编辑] 链接.

 

但上面的效果可是在一个列表里每个 编辑链接都放上这个效果.加入一个列表有1000(肯定不可能放这么多数据)条数据.也就是在1000个连接上放这个效果.哈哈.JQuery实现起来就简单多了.

直接附上代码:

$(":div[name=div_edit]").each(function() {
               $(this).hover(function() {
                   $(this).find(">div:first-child").hide();
                   $(this).find(">div:last-child").show();
               },
           function() {
               $(this).find(">div:first-child").show();
               $(this).find(">div:last-child").hide();
           });
           });

 

注意:

在JQuery中.也可以用 mouseover 和mouseout 来实现,但是有个问题.

我在一个 div 里放了 俩个 div N个连接. 当我给最外面的 div 设置上mouseout 事件的时候,也就是说这个div里面的所有元素都自动继承了mouseout事件.这下可麻烦了.即使你的鼠标离开了div 里面的一个连接.这个div也会触发 mouseout 事件,很烦.所以,推荐用hover(over,out) 方法!

分享到:
评论

相关推荐

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery hover事件导航条.zip

    本项目“jquery hover事件导航条”旨在提供一种优雅的解决方案,利用jQuery库的hover事件来实现动态的菜单导航效果。这个效果使得当鼠标悬停在导航条的某个链接上时,对应的浮动div层会滑动出现,以高亮显示,从而...

    jquery hover事件网页常用顶部固定层下拉导航菜单代码

    jquery hover事件网页常用顶部固定层下拉导航菜单代码 jquery hover事件网页常用顶部固定层下拉导航菜单代码 jquery hover事件网页常用顶部固定层下拉导航菜单代码 jquery hover事件网页常用顶部固定层下拉导航菜单...

    jquery hover事件淘宝商城广告图片高亮显示效果

    本示例中提到的“jquery hover事件淘宝商城广告图片高亮显示效果”是利用jQuery来实现的一种常见交互设计,它使得用户在鼠标悬停在特定广告图片上时,该图片能有高亮显示,提升用户体验,吸引用户的注意力。...

    jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏-20130715

    首先,我们需要理解jQuery中的`hover`事件。`hover`是一个组合事件,由`mouseenter`和`mouseleave`两个事件组成。当你将鼠标指针移到元素上时,`mouseenter`事件触发;当鼠标离开元素时,`mouseleave`事件触发。在...

    jquery hover事件实用的企业网站二级导航菜单样式

    本文将深入探讨如何使用jQuery的hover事件来创建实用且具有吸引力的二级导航菜单样式。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,使得动态交互成为可能。 首先,我们要理解`...

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

    本知识点着重介绍如何利用jQuery中的hover事件来同时绑定两个方法:一个是鼠标悬停(hover)时执行的方法,另一个则是鼠标离开(leave)时执行的方法。 hover事件是一个非常实用的事件,它是鼠标enter(悬停)和...

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

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

    jquery hover事件鼠标悬停九宫格图片高亮显示代码

    在网页设计中,jQuery库为开发者提供了丰富的交互功能,其中包括`hover`事件处理。本教程将深入探讨如何利用jQuery的`hover`事件实现鼠标悬停时九宫格图片的高亮显示效果。这个效果可以增强用户对网页内容的互动体验...

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

    【jQuery Hover事件】 jQuery库是JavaScript的一个强大工具,它简化了DOM操作、事件处理、动画设计等任务。在本项目中,“jquery hover冒泡事件制作心型图片墙鼠标悬浮变大.zip”涉及到的关键技术是jQuery的`hover`...

    jquery hover事件导航条特效代码

    "jQuery hover事件导航条特效代码"是一个利用jQuery库实现的交互式功能,旨在提升用户体验,特别是当鼠标悬停在导航链接上时,能触发动态效果,使用户更加直观地感知当前所处的页面或即将访问的页面。 jQuery是一个...

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

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

    jQueryHover_jQuery鼠标悬停遮罩详细介绍效果_

    jQuery Hover事件是结合了mouseenter和mouseleave两个事件的简写形式。当鼠标进入元素时,mouseenter事件触发,而当鼠标离开元素时,mouseleave事件触发。在我们的例子中,这两个事件分别用于显示和隐藏遮罩层。 ...

    jquery hover显示图片详细介绍

    首先,`hover`是jQuery提供的一种事件处理方法,它可以同时绑定`mouseenter`和`mouseleave`两个事件。当鼠标进入(悬停)元素时,会触发`mouseenter`事件;当鼠标离开元素时,会触发`mouseleave`事件。这使得我们...

    2款jQuery hover鼠标悬停flash动画导航菜单代码

    1. jQuery hover事件:这是jQuery中的一个方法,由两个函数参数组成,分别处理鼠标进入(mouseover)和离开(mouseout)元素时的事件。例如: ```javascript $("#menuItem").hover(function() { // 鼠标进入时的...

    jQuery hover 延时器

    `jQuery.hover`是一个非常实用的函数,用于处理鼠标悬停事件。本篇文章将深入探讨`jQuery.hover`以及与之相关的延时器概念。 `jQuery.hover`是jQuery提供的一种方法,它结合了`mouseenter`和`mouseleave`两个事件。...

    jquery hover图片遮罩层滑动.zip

    首先,我们需要理解jQuery的hover事件。hover()函数是jQuery中的一个方法,它可以接受两个参数,分别对应鼠标进入(mouseover)和离开(mouseout)元素时触发的回调函数。例如: ```javascript $(".image-container...

    使用jquery hover事件实现表格的隔行换色功能示例

    在本文中,我们将探讨如何使用jQuery库中的hover事件来实现表格的隔行换色功能。这种功能通常用于提高表格数据的可视性,使得用户可以更容易地区分和阅读表格中的不同行。 首先,我们需要了解jQuery的hover事件。...

Global site tag (gtag.js) - Google Analytics