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事件进行延时处 ...
随机推荐
- 模式识别之ocr---文字识别Tesseract-OCR 进行文字识别 VS2010
近日做铸件文字识别的项目,需要识别铸件上的字符和数字,找到开源的识别库Tesseract,下面简单记录下怎么使用. 首先在项目主页http://code.google.com/p/tesseract- ...
- 通过spark rdd 求取 特征的稀疏向量
通过spark rdd 求取 特征的稀疏向量 spark 类标签的稀疏 特征向量 - bonelee - 博客园 http://www.cnblogs.com/bonelee/p/7814081.h ...
- HDU2072单词数
#include<iostream> #include<set> #include<sstream> using namespace std; int main() ...
- node inspector的安装以及使用【已经淘汰了】
https://github.com/node-inspector/node-inspector 前提 1.npm install -g node-pre-gyp https://github.com ...
- [Codeforces 1058E] Vasya and Good Sequences
[题目链接] https://codeforces.com/contest/1058/problem/E [算法] 显然 , 我们只需考虑序列中每个数的二进制表示下1的个数即可. 不妨令Ai表示第i个 ...
- Navicat for MySQL 激活方法
Navicat for MySQL 激活方法: 首先下载 PatchNavicat.exe ,不知道在哪儿下的可以直接拿走: 链接:https://pan.baidu.com/s/1yy4M8IDx8 ...
- ZOJ 3955 Saddle Point 校赛 一道计数题
ZOJ3955 题意是这样的 给定一个n*m的整数矩阵 n和m均小于1000 对这个矩阵删去任意行和列后剩余一个矩阵为M{x1,x2,,,,xm;y1,y2,,,,,yn}表示删除任意的M行N列 对于 ...
- 17_activity任务栈和启动模式
夜神安卓模拟器. 如果从第一个页面开启另外一个页面,只要不去调finish()方法咱们上一个页面它是不会退出的,它会留在底下.留在底下的话它设计了这样一个模式就是为了维护一个比较好的用户体验,你的仪器 ...
- (DP)51NOD 1085 背包问题
在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2……Wn(Wi为整数),与之相对应的价值为P1,P2……Pn(Pi为整数).求背包能够容纳的最大价值. Input 第1行,2个整数 ...
- Poj 1236 Network of Schools (Tarjan)
题目链接: Poj 1236 Network of Schools 题目描述: 有n个学校,学校之间有一些单向的用来发射无线电的线路,当一个学校得到网络可以通过线路向其他学校传输网络,1:至少分配几个 ...