今天来简单的谈谈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鼠标划入划出的更多相关文章

  1. JS实现穿墙效果(判断鼠标划入划出的方向)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jquery鼠标经过弹出层写法

    jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...

  3. 通信录分组并且分组标签悬停划入划出(包含错误信息及修改)--第三方开源--PinnedSectionListView

    PinnedSectionListView在github上的链接地址是:https://github.com/beworker/pinned-section-listview . 下载下来后直接将Pi ...

  4. CSS动画划入划出酷炫

    HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...

  5. NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press

    using UnityEngine; /// <summary> /// NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press /// </summa ...

  6. Jquery地图热点效果-鼠标经过弹出提示信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...

  8. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  9. jQuery – 鼠标经过(hover)事件的延时处理

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...

随机推荐

  1. unigui组件中client javascript delphi组件之间的操作

    UniLabel组件: function OnClick(sender, e){ MainForm.UniLabel1.setText('Click!');} function Onmousemove ...

  2. RK3288 6.0 双屏异显,横屏+竖屏【转】

    本文转载自:http://blog.csdn.net/clx44551/article/details/78215730?locationNum=8&fps=1 RK3288 6.0 双屏异显 ...

  3. Bing Maps进阶系列九:使用MapCruncher进行地图切片并集成进Bing Maps

    Bing Maps进阶系列九:使用MapCruncher进行地图切片并集成进Bing Maps 在Bing Maps开发中,由于各种应用功能的不同,更多的时候用户可能需要将自己的一部分图片数据作为地图 ...

  4. Python Tricks(十九)—— switch 的实现

    python 原生语法不支持 switch,体现了 Python 大道至简的设计思路,有时为了避免啰嗦的 if elif等判断语句,我们可以用字典来代替 switch 的各分支,也即建立表达式和操作的 ...

  5. 推理集 —— death

    事故: 自杀: 他杀: 1. 跳楼 头向下死得比较快,没那么痛苦. 脚向下,不会立刻死亡,痛苦至极.死亡原因可能不是跳楼,而是失血过多而死 扑下去, 同头向下. 仰着跌下去,同头向下.. 跳楼最好头先 ...

  6. codeforces 965E Trie+multiset

    E. Short Code time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  7. 第十周 Leetcode 546. Remove Boxes (HARD) 记忆化搜索

    Leetcode546 给定一个整数序列,每次删除其中连续相等的子序列,得分为序列长度的平方 求最高得分. dp方程如下: memo[l][r][k] = max(memo[l][r][k], dfs ...

  8. IOS程序运行过程

    IOS程序是从main开始运行的,main.m文件内容如下: #import <UIKit/UIKit.h> #import "AppDelegate.h" int m ...

  9. Feature分支(转载)

    转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137602623300 ...

  10. E20170616-hm

     transaction   n. 交易,业务,事务; 办理,处理; (一笔) 交易,(一项)事务; (学会等的) 会议记录,学报;  isolation   n. 隔离; 孤独; 隔离状态; 孤立状 ...