首先，这四个事件两两配对使用，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. Ubuntu16.04 安装eclipse

    首先确保自己的Ubuntu已经安装了jdk并且配置好了环境变量 然后在官网下载相应的eclipse安装包: https://www.eclipse.org/downloads/packages/ 下载 ...

  2. 牛客网机试题-求root(N,k)

    题目描述     N<k时,root(N,k) = N,否则,root(N,k) = root(N',k).N'为N的k进制表示的各位数字之和.输入x,y,k,输出root(x^y,k)的值 ( ...

  3. 2019-2020-1 20199308《Linux内核原理与分析》第八周作业

    <Linux内核分析> 第七章 可执行程序工作原理 7.1 知识点 1.目标文件:编译器生成的文件,"目标"指平台,它决定了编译器使用的机器指令集. 2.目标文件格式: ...

  4. java程序员从小工到专家成神之路（2020版）

    目录 必须掌握的基础知识 1. Git & Github 2. Linux 3. 数据结构和算法 4. HTTP / HTTPS 5. 设计模式 6. 计算机原理 java学习之路 1. 工具 ...

  5. http协议请求流程分析

    http协议请求流程分析 用户输入URL(地址链接)(http://www.baidu.com:80/tools.html)客户端获取到端口及主机名后,客户端利用DNS解析域名,首先客户端的浏览器会先 ...

  6. 使用3种协议搭建本地yum仓库

    关闭防火墙和selinux [root@qls yum.repos.d]# systemctl stop firewalld (stop,start,disable,enable) [root@qls ...

  7. Pycharm中设置encoding

    在Pycharm专业版中,为了防止文件在别的机器上出现乱码,所以需要进行字符编码的设置. 首先在Pycharm中的View中将下图中的Toolbar打上勾. 接着,工具栏就会出现,选中settings ...

  8. tr标签使用hover的box-shadow效果不生效

    先说问题: 这是大致的HTML结构 <table cellpadding="0" cellspacing="0"> <thead> &l ...

  9. 图论--双连通E-DCC缩点模板

    // tarjan算法求无向图的桥.边双连通分量并缩点 #include<iostream> #include<cstdio> #include<cstring> ...

  10. Jenkins 源代码管理（SVN）

    Subversion 安装插件 1.首先将本地的自动化用例打包上传 svn 2.配置 jenkins 源代码管理(每次执行 jenkins 时,会自动 check-ou t配置地址中的代码到 Jenk ...