首先，这四个事件两两配对使用，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. golang依赖管理

    目录 使用GOPATH管理依赖 临时GOPATH 依赖查找路径 使用GOVENDER管理依赖 使用GO111MODULE管理依赖 Usage 常用命令列表 不常用命令 使用示例 开启GO111MODU ...

  2. python 携程asyncio 实现高并发示例2

    https://www.bilibili.com/video/BV1g7411k7MD?from=search&seid=13649975876676293013 import asyncio ...

  3. java 脚本引擎执行js

    为用到时,使用方便直接保存一下代码 package com.xzlf.reflectTest; import java.io.BufferedReader; import java.io.FileIn ...

  4. IDE使用GIT控制项目版本

    IDEA本身继承GIT开发插件.只需要安装windows git客户端即可使用. check in project 检入项目 将新创建的项目上传到服务器. 对于git来说,空的目录不会上传到远程仓库. ...

  5. thinkphp5 -- _initialize()初始化控制器

    public function _initialize() { parent::_initialize(); } public function __construct() { $; parent:: ...

  6. Docker镜像与仓库(四)

    Dockerfile方式创建镜像 https://hub.docker.com/_/centos/ #找一个centos6.6 的dockerfile链接 [root@linux-node1 ~]# ...

  7. （转）ATOM介绍和使用

    一,Atom介绍 Atom 是 Github 开源的文本编辑器,这个编辑器完全是使用Web技术构建的(基于Node-Webkit).启动速度快,提供很多常用功能的插件和主题,可以说Atom已经足以胜任 ...

  8. Get on the CORBA

    from: <The Common Object Request Broker: Architecture and Specification> Client To make a requ ...

  9. HDU 1159.Common Subsequence【动态规划DP】

    Problem Description A subsequence of a given sequence is the given sequence with some elements (poss ...

  10. 无向图求割点（找桥）tarjan

    本博客参考了李煜东的<算法竞赛进阶指南>,大家要是觉得这篇文章写的不错请大家支持正版.豆瓣图书 我在之前的博客中讲解了搜索序时间戳,这次我们讲讲追溯值的概念. 追溯值: 设subtree( ...