在前端开发中经常会碰到当鼠标放到一个元素上时会弹出你一个元素,鼠标离开那个弹出元素后隐藏。这类效果一般要用到一些鼠标事件,一类是mouseout和mouseover,另一类是mouseenter和mouseleave。

  其中mouseout和mouseover是会冒泡的,可能会出现不想要的结果;而mouseenter和mouseleave是不会冒泡,这个比较理想。但mouseenter和mouseleave只有在IE下才支持。想要在Firefox下用就必须实现mouseenter和mouseleave事件或者使用Jquery(1.3以上版本)。

mouseout和mouseover、mouseenter和mouseleave的更多相关文章

  1. mouseover和mouseout、mouseenter和mouseleave

    又一个傻傻分不清楚的东东~ 现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的,对于早就接触的mouse事件,更是觉得得心应手了~但是现实却给了我一记重拳! 我自身工作中遇到的犯二的故 ...

  2. mouseover,mouseenter,mouseleave,mouseout

    mouseover和mouseout对应 //鼠标移入移出触发该元素及子元素 mouseenter和mouseleave对应 //鼠标移入移出只触发该元素 看完例子即可知道其区别: mouseover ...

  3. mouseover,mouseout,mouseenter,mouseleave的区别

    相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...

  4. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

  5. mouseout、mouseover和mouseleave、mouseenter区别

    今天在使用鼠标事件时,用错了mouseout,于是做个测试总结. 结论: mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入 ...

  6. mouseover,mouseout与mouseenter,mouseleave

    针对单个元素,使用感一样. 差异提现在有子元素的情况下: mouseover和mouseout在父元素和其子元素都可以触发,当鼠标穿过一个元素时,触发次数得依子元素数量而言. mouseenter和m ...

  7. Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

    定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...

  8. mouseover、mouseout和mouseenter、mouseleave

    这里直接把<Javascript 高级程序设计(第三版)>中的解释贴出来: mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发.不能通过键盘触发这 ...

  9. mouseenter以及mouseleave兼容性

    在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件.有时候,我们需要使用 mouseenter事件来防止子元素的冒泡,这就涉及到事件 ...

随机推荐

  1. <Spring Cloud>入门六 Zuul

    1.Zuul 2.操作 2.1 pom <?xml version="1.0" encoding="UTF-8"?> <project xml ...

  2. centos7 中源码安装nginx

    使用nginx有一段时间了,还是有很多东西不懂的,在这里做一下自己学习过程中的一些整理,能使自己得到提升. 1.环境:centos7 1511  最小化安装 2.下载nginx,可以在系统中下载,也可 ...

  3. docker-ce快速部署

    配置yum源wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repowget -O ...

  4. DB2表空间

    https://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0902yuancg/ 临时表空间的使用 (sorts or jo ...

  5. Django框架基础知识10-内置分页系统

    from django.shortcuts import render, redirect, reversefrom datetime import datetime# Create your vie ...

  6. Highlights in a Journal

    ** Highlights **** example- b huang, 2016, Design and performance enhancement of a bi-directional co ...

  7. pytest以类形式的测试用例

    from __future__ import print_function#pytest以类形式的测试用例class TestClass: @classmethod def setup_class(c ...

  8. Python编译错误总结

    1.TypeError: object() takes no parameters 如果你出现了这个报错,请检查你的__init__函数名或者其定义有没有写错.一般是把__init__写成了__int ...

  9. Fidder详解-工具简介(保存会话、decode解码、Repaly、自定义会话框、隐藏会话、会话排序)

    前言 本文会对Fidder这款工具的一些重要功能,进行详细讲解,带大家进入Fidder的世界,本文会让你明白,Fidder不仅是一个抓包分析工具,也是一个请求发送工具,更加可以当作为Mock Serv ...

  10. [转载] Asynchronous ActionScript Execution

    Asynchronous ActionScript Execution Date September 19, 2009 Language ActionScript 3.0 Target Flash P ...