jQuery鼠标划入划出
今天来简单的谈谈jQuery的一个划入划出的方法,。首先划入划出能想到的东西有哪些呢,。
1:hover
2:mouseenter/mouseleave
3:mouseover/mouseout.
一共是三中方法,先来说说他们的使用方法
1
2
3
4
5
|
$( ".evo" ).hover(function(){ $( this ).addClass( "red" ); },function(){ $( this ).removeClass( "red" ); }) |
这样写有点乱,那就写清楚点
$("").hover(function(){ },function(){ })
其实就这么一点代码,一共两个function,是因为划入划出,第一个function定义的是划入的效果,第二个function里面定义的是划出的效果,。
在来看看第二种
$(".evo").mouseenter(function(){
$(this).addClass("red");
})
$(".evo").mouseleave(function(){
$(this).removeClass("red");
})
再来看看第三种
$(".evo").mouseover(function(){
$(this).addClass("red");
})
$(".evo").mouseout(function(){
$(this).removeClass("red");
})
再来说说他们的区别,这三者之间的区别其实只是两者的区别,首先hover其实和mouseenter+mouseleave是一样的,从字面上就可以理解,一个是鼠标进入,一个是鼠标离开,而mouseover/mouseout和他们之间的区别是上面呢,一般情况下不容易看出来,但是给他们触发的元素里面有子元素就可以看出效果了,。
当用hover或者mouseenter/mouseleave的时候,鼠标移到元素上的时候会触发时间,当再在元素上移到器子元素上的时候就不会再触发了,。
但是mouseover/mouseout就不同了,鼠标移到元素上的时候会触发时间,由元素上移到子元素又会触发,由子元素移到父元素又会再次触发,会不停的触发。
而hover或者mouseenter/mouseleave只会触发一次。鼠标只要是在元素中和其父元素中活动都不会再次触发。
jQuery鼠标划入划出的更多相关文章
- JS实现穿墙效果(判断鼠标划入划出的方向)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jquery鼠标经过弹出层写法
jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...
- 通信录分组并且分组标签悬停划入划出(包含错误信息及修改)--第三方开源--PinnedSectionListView
PinnedSectionListView在github上的链接地址是:https://github.com/beworker/pinned-section-listview . 下载下来后直接将Pi ...
- CSS动画划入划出酷炫
HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...
- NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press
using UnityEngine; /// <summary> /// NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press /// </summa ...
- Jquery地图热点效果-鼠标经过弹出提示信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- jQuery – 鼠标经过(hover)事件的延时处理
一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...
随机推荐
- HDU Today HDU杭电2112【Dijkstra || SPFA】
http://acm.hdu.edu.cn/showproblem.php?pid=2112 Problem Description 经过锦囊相助,海东集团最终度过了危机,从此.HDU的发展就一直顺风 ...
- python 【第一篇】初识python
人生苦短,我用python Python是我喜欢的语言,简洁.优美.容易使用.所以我总是很激昂的向朋友宣传Python的好处. python起源 1989年,为了打发圣诞节假期,Guido开始写Pyt ...
- list-style样式不显示问题
<li> display要使用 list-item ,不要使用block,要不然会造成不显示的问题.
- YTU 2641: 填空题:静态成员---计算学生个数
2641: 填空题:静态成员---计算学生个数 时间限制: 1 Sec 内存限制: 128 MB 提交: 267 解决: 206 题目描述 学生类声明已经给出,在主程序中根据输入信息输出实际建立的 ...
- BZOJ_1862_[Zjoi2006]GameZ游戏排名系统&&BZOJ_1056_[HAOI2008]排名系统_Splay
BZOJ_1862_[Zjoi2006]GameZ游戏排名系统&&BZOJ_1056_[HAOI2008]排名系统_Splay Description 排名系统通常要应付三种请求:上传 ...
- linux shell 实例1
UI项目删除“UIL”文件中的无用字串: 脚本需要制定UIL文件目录位置&无用字串的txt文件,如删除海尔目录下的无用字串: ./delete_uil_string.sh ./haier/UI ...
- 深入理解JMM(Java内存模型) --(三)顺序一致性
数据竞争与顺序一致性保证 当程序未正确同步时,就会存在数据竞争.Java内存模型规范对数据竞争的定义如下: 在一个线程中写一个变量, 在另一个线程读同一个变量, 而且写和读没有通过同步来排序. 当代码 ...
- Ubuntu 14.04 台式机锐捷使用:
1.解压文件:RG_Supplicant_For_Linux_V1.31.zip2.sudo chmod -R 777 rjsupplicant3.进入文件夹(./rjsupplicant.sh -a ...
- NTFS中的ADS的一些问题
有关ADS的简单说明请看http://www.xfocus.net/articles/200212/466.html 可以看到ADS在很久以前就被一些安全人员所关注,并且也提出了一些经典的利用,比如隐 ...
- 汇编程序49:实验14 访问CMOS RAM(显示系统时间)
assume cs:code ;安装程序,使用指令out和in指令 code segment start: mov ax,cs mov ds,ax mov si,offset sub1 mov ax, ...