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) 方法!
JQuery hover(over,out) 使用笔记的更多相关文章
- jQuery hover demo
先放效果图: 百度云下载地址:http://pan.baidu.com/s/1dDpn1Sl 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- jQuery 自定义事件的学习笔记
jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件 代码如下 复制代码 ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- JQuery hover toggle事件使用
JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEn ...
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- 【笔记】jquery hover的用法
hover函数格式: $("A").hover(function(){ //当鼠标移入的时候执行第一个函数 },function(){ //当鼠标移出的时候执行第二个函数 }) * ...
- 锋利的jQuery第2版学习笔记4、5章
第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...
- 《jQuery基础教程》读书笔记
最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...
随机推荐
- Linq to Entities不识别方法
db.UserValidates.Include(a => a.User).Where(uv => u.UserValidates.Contains(uv, c)).ToList(); 执 ...
- Windows消息机制(转)1
Windows的应用程序一般包含窗口(Window),它主要为用户提供一种可视化的交互方式,窗口是总是在某个线程(Thread)内创建的.Windows系统通过消息机制来管理交互,消息(Message ...
- Asus 安装 windows 7
尊敬的华硕用户您好, 您是不是要让S400从usb和光驱启动呢.可以按如下步骤操作,1.开机的时候长按F2键进入BIOS界面,通过方向键进入[Boot]菜单,通过方向键选择[Lunch CSM]选项, ...
- Ado.net对象
Connection对象主要提供与数据库的连接功能 Command 对象用于返回数据,修改数据,运行存储过程以及发送或检索参数信息的数据库命令. DataReader对象通过Command对象提供从数 ...
- 快速搭建Android 开发环境-使用ADT Bundle
一.搭建Android开发环境 近日要学Android开发基础,就着手搭建Windows下的Android开发环境. 找了一些相关的博文参考,基本上都是要分别下载和安装JDK, Eclipse, An ...
- 将HTML格式的String转化为HTMLElement
代码如下: <meta charset="UTF-8"> <title>Insert title here</title> </head& ...
- javascript数组方法鉴赏一
创建数组 如果你习惯了用 new 来实例化对象的形式,那么在js中一定会疑惑,可选的参数数量代表的意义截然不同. new Array(size);//传一个参数的时候分两种情况,size是正整数时代表 ...
- android 监听app进入后台以及从后台进入前台
package com.pinshang.base; import com.pinshang.common.CommonValue; import com.pinshang.investapp.Ent ...
- sort命令总结
功能:排序 语法:sort [-bcdfimMnr][-o<输出文件>][-t<分隔字符>][+<起始栏位>-<结束栏位>][--help][--ver ...
- layout_weight
最近写Demo,突然发现了Layout_weight这个属性,发现网上有很多关于这个属性的有意思的讨论,可是找了好多资料都没有找到一个能够说的清楚的,于是自己结合网上资料研究了一下,终于迎刃而解,写出 ...