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事件进行延时处 ...
随机推荐
- tomcat的HTTPS
完美配置Tomcat的HTTPS 博客分类: Tomcat HTTPS Tomcat配置HTTPS的文章到处都有,过程也比较简单,随后文中会转一段过来. 但对于启用APR情况下报异常“java.l ...
- 【Swift】学习笔记(二)——基本运算符
运算符是编程中用得最多的,其包含一元,二元和三元 三种运算符.swift也和其他编程语言一样基本就那些,以下总结一下,也有它特有的运算符.比方区间运算符 1.一元运算符 = 赋值运算符,用得最多的 ...
- please get a license from www.texturepacker.com
我们在使用texturepacker创建资源后,在使用资源时出现下述问题:please get a license from www.texturepacker.com 如图: 这个是由于我们的版本号 ...
- xenserver PXE安装系统错误的解决
刚开始在xenserver里找pxe启动安装系统找了半天,最后在NEW VM里的template里选择other install media 里找到pxe启动,启动之后加载映像,安装到一半又停止了, ...
- sdut 4-1 复数类的运算符重载
4-1 复数类的运算符重载 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 通过本题目的练习能够掌握成员运算符重载及友元运算符重载 要求定义一个复数类.重 ...
- neo4j 张一鸣 8
头条关注 粉丝关系 张一鸣 8
- 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)
利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...
- 【BZOJ 3732】 Network
[题目链接] 点击打开链接 [算法] 求出这个图的最小生成树,对于每次询问,用倍增法求出最近公共祖先,查询最小生成树上两点路径上的最大值 算法的正确性? 假设x和y在最小生成树中 ...
- python-----查看显卡gpu信息
需要安装pynvml库. 下载地址为:https://pypi.org/project/nvidia-ml-py/#history pip安装的命令为: pip install nvidia-ml-p ...
- POJ2069 最小球覆盖 几何法和退火法
对这种问题不熟悉的读者 可以先去看一看最小圆覆盖的问题 ZOJ1450 现在我们来看最小球覆盖问题POJ2069 题目很裸,给30个点 求能覆盖所有点的最小球的半径. 先给出以下几个事实: 1.对于一 ...