JQuery hover(over,out) 使用笔记

转载自：http://www.douban.com/note/202404884/

JQuery hover(over,out) 使用笔记

JavaScript 下.onmouseover() 和 onmouseout()事件给我们的WEB页面交互带来了无数超炫的效果.而在JQuery里.取而代之的是 hover(over,out)事件.

用法:

$("#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) 方法!