首页 > jquery网页培训班 > JQuery hover(over,out)函数 使用笔记

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

 

toggle()函数使用整理

jquery全选和反选input代码

 

原文地址:http://www.35ui.cn/post/20110809424.html

标签做网页常用代码js网页制作javascript培训班jQuery教程jquery

上一条: javascript获取浏览器边距大全
下一条: js+jquery tab切换书签制作教程大全

  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码