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事件进行延时处 ...
随机推荐
- [项目机会]使用lync的统一通信平台
[项目内容]基于微软的lync或者其他思科.腾讯等公司技术,建立一个员工统一的通讯平台,可以随时的保持员工之间沟通. [项目价值] 1.保持项目团队成员之间的随时随地高效的电话或者视频会议: 2.集成 ...
- office文档、图片、音/视频格式转换工具
1.音频/视屏转换工具VLC https://wiki.videolan.org/Mp3/#Container_formats http://wenku.baidu.com/view/ba73ac5 ...
- HDU 5976 Detachment 【贪心】 (2016ACM/ICPC亚洲区大连站)
Detachment Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- Android 的坑一 :android.content.res.Resources$NotFoundException: String resource ID #0x0 找不到资源文件ID #0x0
原因分析如下: 遇到这种情况,很有可能是把一个int型业务数据的 设置setText()或者类似的方法中, 这样Android系统就会主动去资源文件当中寻找, 但是它不是一个资源文件ID, 所以就会报 ...
- 美国诚实签经验——我们准备了XX万的存款,这足以应付我预算表中涉及的所有开支,如果有意外情况我们的资金不足以应付,我们双方的父母也会支援我们,绝对不会占用美国的任何福利
闲话少絮,直接分享本人诚实签的经验,希望对有此打算的朋友有帮助! 个人经验有限,经历仅供参考~~ 第一步:决定赴美生子. 第二步:选择诚实签. 第三步:填写DS160表格(网址https://ceac ...
- hdoj--1872--稳定排序(水题)
稳定排序 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
- 最长回文子串问题 O(n)算法 manacher URAL1297 HDU3068
先来看一道简单的题,ural1297 给定一个1000长度的字符串,求最长回文子串. 看起来很Naive,乱搞一下,O(n^2)都可以解决. 再来看这个题 HDU3068 120个110000长度的字 ...
- 51Nod 1486 大大走格子 —— 容斥
题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1486 对于每个点,求出从起点到它,不经过其他障碍点的方案数: 求一 ...
- ubuntu16.04 查看系统可用内存
free -m 查看内存情况 (单位MB) mem 行显示了从系统角度看来内存使用的情况, total是系统可用的内存大小, 数量上等于系统物理内存减去内核保留的内存. buffers和cach ...
- Python基础类型(一) int 整型
Python算术运算符 以下假设变量: a=10,b=20: 运算符 描述 实例 + 加 - 两个对象相加 a + b 输出结果 30 - 减 - 得到负数或是一个数减去另一个数 a - b 输出结果 ...