mouseover()与mouseout()区别

 普通鼠标移入移出事件
     语法:
         mouseover()/mouseout()
     功能:
         当鼠标移入/移出到添加事件的元素或其子元素的时候，都会被触发
!!mouseenter/mouseleave是更好的鼠标移入事件!!
     语法：
         mouseenter()/mouseleave()
     功能：
         当鼠标移入/移出到添加事件的元素才会被触发,子元素不会被触发
例子：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .father{

             width: 300px;

             height: 200px;

             background-color: #2AB89A;

             border: 1px solid #cc6600;

         }

         .son{

             width: 100px;

             height: 100px;

             background-color:skyblue;

             border: 1px solid #fff;

         }

     </style>

     <script src="lib/jquery-1.12.2.js"></script>

     <script>

         $(function () {

             // mouseover

        /*     $('.father').mouseover(function () {

                 console.log("moseouer");

             });

             // mouseout

             $('.father').mouseout(function () {

                 console.log("mouseout");

                 $(this).hide();

             });*/

             $('.father').mouseenter(function () {

                 console.log("mouseenter");

             });

             // mouseout

             $('.father').mouseleave(function () {

                 console.log("mouseleave");

                 $(this).hide();

             });

         });

     </script>

 </head>

 <body>

 <h1>鼠标移出大盒子的时候才隐藏大盒子</h1>

 <div class="father">

     外面的老爹

     <div class="son">

         里面的孩子

     </div>

 </div>

 </body>

 </html>
 

JQuery--mouseover()与moseout()的区别的更多相关文章

  1. jQuery mouseover与mouseenter的区别

    在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

  2. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  3. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  4. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  5. hover和mouseover，mouseout的区别

    说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触 ...

  6. jquery生产和开发的区别

    今天说一下jquery生产和开发的区别,在我们下载jquery的时候,会有两个下载链接,一个是jquery.min.js .迷你版 (生产),另一个是 jquery.js .开发版 .不知道的人可能就 ...

  7. JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这 ...

  8. 转: JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这 ...

  9. Jquery中$与$.fn的区别

    Jquery中$与$.fn的区别 当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为其中的一员,自然也不例外,尽管刚开始时很排 ...

  10. jQuery:mouseover and Increase the Size of an Image

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Tomcat--远程Debug以及参数配置调优

    本文会讲解Tomcat远程Debug调试,Tomcat-manager监控(简单带过),psi-probe监控和Tomcat参数调优.本文基于Tomcat8.5版本. Tomcat远程Debug: 远 ...

  2. [转]js模块化——AMD及require.js

    由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Definitio ...

  3. DLL编程总结

    进行DLL的编程主要涉及到两个方面的问题,一个是要保证DLL中要导出的函数名不被编译器不可控地更改(在C++中由于重载机制的存在,会造成程序被编译时函数名被改变),其实就是要保证DLL导出的函数名与使 ...

  4. LuoguP3690 【模板】Link Cut Tree （动态树） LCT模板

    P3690 [模板]Link Cut Tree (动态树) 题目背景 动态树 题目描述 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 0:后接两 ...

  5. IDEA javax.servlet.http.HttpServletRequest; 不存在 解决方案

    使用idea创建一个web项目,在项目中报HttpServletRequest和HttpServletResponse不存在. 问题原因:idea不会默认引用tomcat的jar包. 解决方法: [注 ...

  6. 新的开始 | Arthas GitHub Star 破万后的回顾和展望

    一切新的开始,都始于一个里程碑. 2月20日上午,Java 开源诊断工具 Arthas 的 GitHub Star 突破10000,距离开源后的第一个Release 版发布仅 147 天. 从中,我们 ...

  7. Linux 拷贝有更改的文件

    cp -Ruv /home/username/trunk_new/app/* /data/httpdocs/wwwroot/app/

  8. sass进阶

    代码的重用 基础的部分我们讲述了变量 Mixin 这两种方法可以增加扩展和重用 现在开始继续学习:extend继承 .class1 { border: 1px solid #ddd; } .class ...

  9. $\mathcal{Miemeng}$的病态码风计划

    晚上困的要命,先写个码风计划提提神. 计划目标 抵制无理压行. 抵制不可读代码. 倡导代码艺术化,分层化 具体的一些细节和展示 1>整体 首先要把预读部分(我这么叫的),命名域使用,全局变量定义 ...

  10. 从页面获取form表单提交的数据

    1 使用HttpServletRequest,方便灵活 页面代码,使用action提交一个表单,里边有球的id,球的主人,球的颜色,所在省份,区域 <form action="ball ...