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

JQuery hover(over,out) 使用笔记的更多相关文章

  1. jQuery hover demo

    先放效果图: 百度云下载地址:http://pan.baidu.com/s/1dDpn1Sl 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  2. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...

  3. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  4. JQuery hover toggle事件使用

    JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEn ...

  5. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  6. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  7. 【笔记】jquery hover的用法

    hover函数格式: $("A").hover(function(){ //当鼠标移入的时候执行第一个函数 },function(){ //当鼠标移出的时候执行第二个函数 }) * ...

  8. 锋利的jQuery第2版学习笔记4、5章

    第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...

  9. 《jQuery基础教程》读书笔记

    最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...

随机推荐

  1. 0301——UItableView

    - (void)viewDidLoad { [super viewDidLoad]; self.myTableView = [[UITableView alloc]initWithFrame:CGRe ...

  2. Objective-C 字符串

    #import <UIKit/UIKit.h> #import "AppDelegate.h" int main(int argc, char * argv[]) { ...

  3. iPhoneKeyboard

    iPhoneKeyboard.Open static function Open (text : string, keyboardType : iPhoneKeyboardType = iPhoneK ...

  4. Asp.net mvc4 + HighCharts + 曲线图

    前端代码: @{ Layout = null;}<!DOCTYPE html><html><head> <title></title> &l ...

  5. hdu1406

    一道很水很水的题!!!!!!!!!! #include<iostream> using namespace std; int main(){ int num1,num2,i,k,j,sum ...

  6. Java中的int和Integer

    代码: public class Test{ public static void main(String[] args){ Integer i01 = 59; int i02 = 59; Integ ...

  7. Opensuse13.2开启ssh

    要开启ssh很简单,步骤分为三步 步骤1: 安装ssh zypper install ssh 步骤2:启动ssh daemon网上很多通过 service 命令或者 init.d 目录中的脚本启动ss ...

  8. MFC线程(三):线程同步事件(event)与互斥(mutex)

    前面讲了临界区可以用来达到线程同步.而事件(event)与互斥(mutex)也同样可以做到. Win32 API中的线程事件 HANDLE hEvent = NULL; void MainTestFu ...

  9. CSS Reset方法

    CSS Reset 即重设浏览器的样式.在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小. 但并不是所有的浏览器都使用一样的数值,所以,有了CSS Reset ...

  10. WDCP LNMPA和LNMP 504 Gateway time-out错误的解决方法

    Nginx的特点是处理静态很给力,Apache的特点是处理动态很稳定,两者结合起来便是LNMPA,nginx处理前端,apache处理后端,这样处理静态会很快,处理动态会很稳定.当我以为安装完成以后便 ...