mousedown:鼠标按下才发生

mouseup:鼠标按下松开时才发生

mouseenter和mouseleave效果和mouseover mouseout效果差不多；但存在区别，区别见代码解析：

css代码：

<style>

            .cc,.dd{

                height: 80px;

                width: 300px;

                border: 1px solid black;

            }

            .ff,.ee{

                height: 200px;

                width: 300px;

                background-color: darkgrey;

                border:1px solid red;

                text-align: center;

            }

        </style>

html代码：

<body>

		<div class="aa">1、please press down your mouse button</div><br />

		<div class="bb">2、please press up your mouse button</div><br />

		<div class="cc"> 

			3、mouseenter：颜色变红

			mouseleave：颜色变灰

		</div><br />

		<div class="dd">

			4、mouseover：颜色变黄

			mouseout：颜色变灰

		</div><br />

		<div class="ff"> 5、<p style="background-color: white;">mouseout事件在鼠标离开任意一个子元素及选的元素时触发</p><span></span> </div><br />

		<div class="ee"> 6、<p style="background-color: white;">mouseleave事件只在鼠标离开选取的的元素时触发。</p><span></span>  </div>

	</body>

　　

jqery代码：

<script>

//当鼠标按下时会显示

        $(".aa").mousedown(function(){

            $(this).after("<p>when mouse button press down</p>")

        });

//当鼠标按下松开时发生的

        $(".bb").mouseup(function(){

            $(this).after("<p>when mouse button press up</p>")

        });

//当鼠标enter/leave

        $(".cc").mouseenter(function(){

            $(".cc").css("background-color","red")

        });

         $(".cc").mouseleave(function(){

            $(".cc").css("background-color","grey")

        });

 //当鼠标mouseover/mouseout

       $(".dd").mouseover(function(){

           $(".dd").css("background-color","yellow")

       });

       $(".dd").mouseout(function(){

           $(".dd").css("background-color","grey")

       });

 //mouseleave 与 mouseout 的区别

 x=0;

 y=0;

 $(".ff").mouseout(function(){

     $(".ff span").text(x+=1);

 })

 $(".ee").mouseleave(function(){

     $(".ee span").text(y+=1);

 })

 //mouseenter,mouseover同理

 //mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。

//mouseenter 事件只在鼠标移动到选取的元素上时触发。

</script>

jQuery中有关mouse的事件--mousedown/up/enter/leave/over/out----2017-05-10的更多相关文章

  1. jQuery中ready与load事件

    jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...

  2. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  3. jquery中怎样防止冒泡事件

    jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()

  4. JQuery中的对象和事件

    一:JQuery 对象和 Dom 对象 在使用 JQuery 过程中,我们一般(也是绝大多数情况下,除非我们使用了第二个框架)只有两类对象,即:JQuery 对象和 Dom 对象.Dom 对象指的是普 ...

  5. jquery中ajax的相关事件汇总

    Jquery ajax事件分类 (一) 局部事件 local events 局部事件:在单个Ajax请求对象中绑定的事件,每个 Ajax 请求对象能够依据须要绑定自己的局部事件 .局部事件仅仅会被那个 ...

  6. jQuery中四个绑定事件的区别 on,bind,live,delegate

    1.jQ操作DOM元素的绑定事件的四种方式       jQ中提供了四种事件监听方式,bind.live.delegate.on,对应的解除监听的函数分别是unbind,die,undelegate, ...

  7. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

  8. jQuery中两种阻止事件冒泡的区别

    方式一:event.stopPropagation(); 方式二:return false; 但是这两种方式是有区别的.return false 不仅阻止了事件往上冒泡,而且阻止了事件本身.event ...

  9. jQuery 中ready与load事件

    jquey有3种针对文档加载的方法: //document ready $(document).ready(function(){ //...代码... }) //document ready 简写 ...

随机推荐

  1. Eventlog控件的使用

    CreateEventSource 已重载. 建立一个能够将事件信息写入到系统的特定日志中的应用程序. Delete 已重载. 移除日志资源. DeleteEventSource 已重载. 从事件日志 ...

  2. Java线程的六种状态

    java线程有很多种状态,最主要的有六种,被创建.运行.睡眠.等待.阻塞以及消亡六种,也有很多归结为5种,把睡眠以及等待归结为冻结: 被创建:就是线程被创建,就是new thread()之后就是创建一 ...

  3. Appium安卓真机环境搭建

    说明 步骤可能比较简洁,因为手头上有安卓测试机,所以需要配置虚拟机的童鞋请去虫师博客园,因为我也是从那儿学的,哈哈.点我飞到虫师那儿 但是如果你要搭建真机测试环境的话,本教程将是最简单实用的. 1. ...

  4. Android(Java)利用findbugs进行代码静态检查

    主要介绍利用java静态代码检查工具findbugs进行代码检查,包括其作用.安装.使用.高级功能(远程review和bug同步). 虽然Android提供了Test Project工程以及instr ...

  5. 笔记︱决策树族——梯度提升树(GBDT）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本笔记来源于CDA DSC,L2-R语言课程所 ...

  6. Java基本数据类型的长度范围

    1.Java基本数据类型的长度范围代码 /** * @Title:DataTypeLength.java * @Package:com.you.dao * @Description:Java数据类型长 ...

  7. DirectShow中写push模式的source filter流程 + 源代码(内附详细注释)

    虽然网上已有很多关于DirectShow写source filter的资料,不过很多刚开始学的朋友总说讲的不是很清楚(可能其中作者省略了许多他认为简 单的过程),读者总希望看到象第一步怎么做,第二步怎 ...

  8. 用OpenStack界面轻松创建虚拟机的你，看得懂虚拟机启动的这24个参数么？

    看这篇文章之前,保证看过以下文章: 我是虚拟机内核我困惑?! Qemu,KVM,Virsh傻傻的分不清 裸用KVM创建虚拟机,体验virtualbox为你做的10件事情 大家从OpenStack页面上 ...

  9. Hive 编程之DDL、DML、UDF、Select总结

    Hive的基本理论与安装可参看作者上一篇博文<Apache Hive 基本理论与安装指南>. 一.Hive命令行 所有的hive命令都可以通过hive命令行去执行,hive命令行中仍有许多 ...

  10. jtyhon 介绍

    Jython是Python的纯Java实现.她无缝地结合了Java类与Python,使用户能以Python语言的语法编写在Java虚拟机上运行的 软件.它的特点有:与相似的Java程序相比,Jytho ...