转载自：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) 方法!