首先，这四个事件两两配对使用，onmouseenter、onmouseleave一对，onmouseover、onmouseout一对，不能混合使用。

onmouseenter 和 onmouseleave是一组：当鼠标进入指定区域的时候触发，但是不支持冒泡，进入或者离开子元素时都不触发（父亲的东西就是父亲的，不归儿子所有）。如图：

onmouseover和onmouseout是一组：当鼠标进入指定区域的时候触发，支持冒泡，进入或者离开子元素都会触发（父亲有的东西，儿子也有）。如图：

onmouseenter,onmouseleave,onmouseover,onmouseout的区别的更多相关文章

  1. Vue中 onmouseenter,onmouseleave,onmouseover,onmouseout的区别

    今天在学Vue视频的时候,提到了这四个触发事件,我就想做下笔记: 1.onmouseenter和onmouseleave是一组:当鼠标进入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发 ...

  2. onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave

    [onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave] 1.onmouseleave.onmouseenter,鼠标进入到指定元素区 ...

  3. 事件冒泡以及onmouseenter 和 onmouseover 的不同

    1. onmouseenter onmouseenter 事件在鼠标指针移动到元素上时触发. 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发. onmouseent ...

  4. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  5. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  6. onmouseleave与onmouseout区别

    1.onmouseleave.onmouseenter,鼠标进入到指定元素区域内触发事件,不支持冒泡,不包含子元素的区域. 2.onmouseout.onmouseover.鼠标进入指定元素触发事件, ...

  7. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  8. 侧边栏收起展开效果，onmouseover,onmouseout

    //方法一<!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  9. html 1.0 鼠标放上去会亮 onmouseover onmouseout 以及this标签的使用

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

随机推荐

  1. C# 反射（一）

    刚工作没多久,需要对以往的知识进行复习和巩固.先讲讲最近在公司常用到的反射机制. 反射(Reflection):提供了封装程序集.模块和类型的对象(Type 类型).可以使用反射动态创建类型的实例,将 ...

  2. react typescript jest config (一)

    1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...

  3. JDBC 进阶:使用封装通用DML DQL 和结构分层以及at com.mysql.jdbc.PreparedStatement.setTimestamp空指针异常解决

    准备: 数据表 CREATE TABLE `t_user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(10) DEFAULT ...

  4. linux 磁盘存储和文件系统

    1.磁盘结构 设备文件:关联至一个设备驱动程序,进而能够与之对应硬件设备进行通信 I/O Ports:I/O 设备地址 一切皆文件:open(),read(),write(),close() 设备类型 ...

  5. ThinkPHP3.2自定义配置和加载

    有时候我们会有一些规则定义每个数字对应的实际内容,比如说在下拉菜单的时候: <select name="reasonAndType" id=""> ...

  6. JS 获取GET 参数

    对于 URL,我们需要了解更多,因为我们的开发中可能会需要提取URL的部分信息来做不同的事情,事实上这也是与后端交互的一种独特的方式,当然这肯定是安全的,当请求被返回,关于 url 的信息就被记录在了 ...

  7. 第九次-DFA最小化，语法分析初步

    1.将DFA最小化:教材P65 第9题 2.构造以下文法相应的最小的DFA S→ 0A|1B A→ 1S|1 B→0S|0 3.自上而下语法分析,回溯产生的原因是什么? 4.P100 练习4,反复提取 ...

  8. Synchronous and Asynchronous I/O [Windows]

    There are two types of input/output (I/O) synchronization: synchronous I/O and asynchronous I/O. Asy ...

  9. QtConcurrent::run 运行类的成员函数

    https://stackoverflow.com/questions/2152355/is-it-possible-to-use-qtconcurrentrun-with-a-function-me ...

  10. 【JAVA基础】09 Eclipse

    1. Java开发工具 操作系统自带的记事本软件 高级记事本软件 集成开发环境 IDE (Integrated Development Environment) Eclipse和MyEclipse的区 ...