$("#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) 方法!
- 浏览: 1740551 次
最新评论
-
xinglianxlxl:
有空看看,谢谢
eclipse经常未响应优化 -
code_xiaoke:
我觉得Lucene版本变化太大!! 对于版本的变动 太巨大了 ...
Lucene使用IKAnalyzer分词实例 及 IKAnalyzer扩展词库 -
jayant-xu:
...
BigDecimal加减乘除运算 -
jayant-xu:
[img][/img]大大
BigDecimal加减乘除运算 -
jayant-xu:
[*]案说法是否
BigDecimal加减乘除运算
相关推荐
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
本项目“jquery hover事件导航条”旨在提供一种优雅的解决方案,利用jQuery库的hover事件来实现动态的菜单导航效果。这个效果使得当鼠标悬停在导航条的某个链接上时,对应的浮动div层会滑动出现,以高亮显示,从而...
jquery hover事件网页常用顶部固定层下拉导航菜单代码 jquery hover事件网页常用顶部固定层下拉导航菜单代码 jquery hover事件网页常用顶部固定层下拉导航菜单代码 jquery hover事件网页常用顶部固定层下拉导航菜单...
本示例中提到的“jquery hover事件淘宝商城广告图片高亮显示效果”是利用jQuery来实现的一种常见交互设计,它使得用户在鼠标悬停在特定广告图片上时,该图片能有高亮显示,提升用户体验,吸引用户的注意力。...
首先,我们需要理解jQuery中的`hover`事件。`hover`是一个组合事件,由`mouseenter`和`mouseleave`两个事件组成。当你将鼠标指针移到元素上时,`mouseenter`事件触发;当鼠标离开元素时,`mouseleave`事件触发。在...
本文将深入探讨如何使用jQuery的hover事件来创建实用且具有吸引力的二级导航菜单样式。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,使得动态交互成为可能。 首先,我们要理解`...
本知识点着重介绍如何利用jQuery中的hover事件来同时绑定两个方法:一个是鼠标悬停(hover)时执行的方法,另一个则是鼠标离开(leave)时执行的方法。 hover事件是一个非常实用的事件,它是鼠标enter(悬停)和...
在本文中,我们将深入探讨如何使用jQuery的hover事件来创建一个独特的心形图片墙,当鼠标悬浮在图片上时,会产生动态效果。首先,我们需要理解jQuery库的基本概念以及hover事件的工作原理。 jQuery是一个广泛使用的...
在网页设计中,jQuery库为开发者提供了丰富的交互功能,其中包括`hover`事件处理。本教程将深入探讨如何利用jQuery的`hover`事件实现鼠标悬停时九宫格图片的高亮显示效果。这个效果可以增强用户对网页内容的互动体验...
【jQuery Hover事件】 jQuery库是JavaScript的一个强大工具,它简化了DOM操作、事件处理、动画设计等任务。在本项目中,“jquery hover冒泡事件制作心型图片墙鼠标悬浮变大.zip”涉及到的关键技术是jQuery的`hover`...
"jQuery hover事件导航条特效代码"是一个利用jQuery库实现的交互式功能,旨在提升用户体验,特别是当鼠标悬停在导航链接上时,能触发动态效果,使用户更加直观地感知当前所处的页面或即将访问的页面。 jQuery是一个...
"jquery hover鼠标悬停到图文列表时滑动图片切换"这个主题涉及到了jQuery中的`hover`事件以及动态改变图片显示的技巧。下面我们将详细探讨这些知识点。 一、jQuery `hover`事件 `hover`是jQuery中的一个复合事件,...
jQuery Hover事件是结合了mouseenter和mouseleave两个事件的简写形式。当鼠标进入元素时,mouseenter事件触发,而当鼠标离开元素时,mouseleave事件触发。在我们的例子中,这两个事件分别用于显示和隐藏遮罩层。 ...
首先,`hover`是jQuery提供的一种事件处理方法,它可以同时绑定`mouseenter`和`mouseleave`两个事件。当鼠标进入(悬停)元素时,会触发`mouseenter`事件;当鼠标离开元素时,会触发`mouseleave`事件。这使得我们...
1. jQuery hover事件:这是jQuery中的一个方法,由两个函数参数组成,分别处理鼠标进入(mouseover)和离开(mouseout)元素时的事件。例如: ```javascript $("#menuItem").hover(function() { // 鼠标进入时的...
`jQuery.hover`是一个非常实用的函数,用于处理鼠标悬停事件。本篇文章将深入探讨`jQuery.hover`以及与之相关的延时器概念。 `jQuery.hover`是jQuery提供的一种方法,它结合了`mouseenter`和`mouseleave`两个事件。...
首先,我们需要理解jQuery的hover事件。hover()函数是jQuery中的一个方法,它可以接受两个参数,分别对应鼠标进入(mouseover)和离开(mouseout)元素时触发的回调函数。例如: ```javascript $(".image-container...
在本文中,我们将探讨如何使用jQuery库中的hover事件来实现表格的隔行换色功能。这种功能通常用于提高表格数据的可视性,使得用户可以更容易地区分和阅读表格中的不同行。 首先,我们需要了解jQuery的hover事件。...