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事件进行延时处 ...
随机推荐
- frame pointer及其用途
1 什么是frame pointer frame pointer指向本函数栈帧顶,通过它可以找到本函数在进程栈中的位置.有专门的寄存器保存该值. 2 frame pointer有什么用 主要是back ...
- 红米note怎么打开USB调试模式
红米note到货后,打开USB调试模式是一些新手很棘手的问题,所以要手机助手成功识别红米note,你必须打开红米note的USB调试模式.在安卓4.2版本中,系统的USB调试模式不是非常简单地被打开的 ...
- CodeFirst建模:DataAnotation
示例一 新建一个控制台应用程序,并安装entityframework 新建一个文件Blog.cs类,输入以下代码: using System.ComponentModel.DataAnnotation ...
- 4.9 Parser Generators
4.9 Parser Generators This section shows how a parser generator can be used to facilitate the constr ...
- python-----opencv读取视频、读取图片 显示指定大小并按键实现暂停、播放
按空格键实现暂停播放,代码如下: cv2.namedWindow("m1", 0) cv2.resizeWindow("m1", 800, 600) cv2.i ...
- ubuntu 16.04 Eclipse 图标显示为 ?(已解决)
这个问题挺好解决: sudo gedit /usr/share/applications/eclipse.desktop在这个文件中将Icon=/home/soyo/eclipse/icon.xpm, ...
- 函数bsxfun,两个数组间元素逐个计算的二值操作
转自http://www.cnblogs.com/rong86/p/3559616.html 函数功能:两个数组间元素逐个计算的二值操作 使用方法:C=bsxfun(fun,A,B) 两个数组A合B间 ...
- CodeForces 446A DZY Loves Sequences (DP+暴力)
题意:给定一个序列,让你找出一个最长的序列,使得最多改其中的一个数,使其变成严格上升序列. 析:f[i] 表示以 i 结尾的最长上升长度,g[i] 表示以 i 为开始的最长上升长度,这两个很容易就求得 ...
- JEECG框架使用Tomcat启动报ClassNotFound
JEECG框架缺少一个类,名为AnnotationProcessor,包名为:org.apache package org.apache; import java.lang.reflect.Invoc ...
- oracle创建数据库与配置监听器
上述是数据库创建完毕 *检测创建 -------------------------------------------------------------2配置监听器---------------- ...