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) 方法!