mouseout、mouseover和mouseleave、mouseenter区别

news/2024/5/18 12:03:20/文章来源:https://blog.csdn.net/weixin_30399055/article/details/101191313

mouseoutmouseovermouseleavemouseenter区别

结论:

mouseenter:当鼠标移入某元素时触发。

mouseleave:当鼠标移出某元素时触发。

mouseover:当鼠标移入某元素时触发,移入其子元素时也会触发。

mouseout:当鼠标移出某元素时触发,移出其子元素时也会触发。

mousemove:鼠标在某元素上移动时触发,即使在其子元素上也会触发。

mouseout、mouseover和mouseleave、mouseenter最大的区别,在于mouseleave、mouseenter子元素连带触发。

优先级:

mouseout > mouseover > mouseenter = mouseleave >mousemove

例子:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.a{width: 500px;height: 500px;background: aliceblue;}.b{width: 200px;height: 200px;background: beige;}.c{width: 100px;height: 100px;background: violet;}</style>
</head>
<body><div class="a">A<div class="b"οnmοuseenter="mouseenter()"οnmοuseleave="mouseleave()"οnmοuseοut="mouseout()"οnmοuseοver="mouseover()"οnmοusemοve="mousemove()">B<div class="c">C</div></div></div><script>function mouseenter(){console.log('mouseenter')}function mouseleave(){console.log('mouseleave')}function mouseout(){console.log('mouseout')}function mouseover(){console.log('mouseover')}function mousemove(){console.log('mousemove')}</script>
</body>
</html>

  

效果:

 

操作:

 

转载于:https://www.cnblogs.com/cloud-dream/p/11471177.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_752586.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

25个灵感来自大自然的优秀网站设计作品(转)

灵感是一种瞬间产生的富有创造性的突发思维状态&#xff0c;使我们能创造更加美好和独特的东西。对设计师来说&#xff0c;灵感来了意味着新的作品即将诞生。要说最能触及人的灵魂和艺术性的就是大自然了&#xff0c;它能刷新我们的思想&#xff0c;让我们的心情平静。这篇文章…

传统网站与Web标准——表格布局实例

步骤1&#xff1a; 一、效果 二、HTML <table border"0" cellspacing"0" cellpadding"0"><tr bgcolor"#220103"><td width"215" rowspan"2" colspan"2"><img src"mm_spa_pho…

利用vs2005发布asp.net网站到远程服务器上

早就知道vs2005中发布网站提供了多种方式,不过一直没深入研究,这次项目中正好用到,研究了下发布到"远程服务器上"的功能.首先要发布的时候,需要目标服务器上有对应的网站,否则会报如下图的错误:我们在目标服务器上建立完对应的网站后,并不能立即使用vs2005发布到该网…

使用Apache搭建Web网站服务器

使用Apache搭建Web网站服务器一&#xff1a;实验目标apache服务器常见概念apache服务器安装及相关配置文件例1&#xff1a;为公司内网搭建一个web服务器例2&#xff1a;使用rpm搭建lamp 环境例3&#xff1a;修改网根目录及对应参数&#xff0c;设置访问权限例4,&#xff1a;使用…

B2B行业网站“页面结构”分析及应用

B2B行业网站策划提供给网站设计师的策划文档里&#xff0c;一般都表明了每个部份的内容和功能所采用的页面结构&#xff0c;但是并不代表设计师就能理解策划者在页面结构方面的考虑&#xff0c;以及由于有的策划者对网络了解不太深入&#xff0c;或者说有一些疏忽&#xff0c;从…

《网络安全法》已经实施了,你的网站准备好了吗?

2019独角兽企业重金招聘Python工程师标准>>> 在网络安全格局国家化的大背景下&#xff0c;6月1日&#xff0c;我国《中华人民共和国网络安全法》终于正式施行了。虽然立法历程可谓一波三折&#xff0c;而且相比别的国家也着实不算早&#xff0c;但总算还是为未来的信…

有什么办法可以判断页面是静态还是动态?_静态网站怎么建设?有什么优势?

自网站建设以来&#xff0c;就存在静态网站和动态网站之分&#xff0c;对应的网站建设技术也不断迭代更新&#xff0c;静态网站主要的语言是HTML(超文本标记语言)或XML(可扩展标记语言)&#xff0c;下面小编来告诉你&#xff0c;静态网站怎么建设还有优势是什么。一、静态网站怎…

大型网站技术架构:核心原理与案例分析

大型网站技术架构&#xff1a;核心原理与案例分析 &#xff08;最接地气的网站架构经验&#xff0c;网站生存技术心要&#xff0c;应对大数据挑战的干货分享&#xff01;&#xff09; 李智慧 著 ISBN 978-7-121-21200-0 2013年9月出版 定价&#xff1a;59.00元 240页 16开 编辑…

雅虎48亿美元卖身Verizon,门户网站路在何方?

7月25日《华尔街日报》报道&#xff0c;Verizon以48亿美元的价格收购雅虎的核心业务&#xff0c;雅虎董事会已接受Verizon通讯的收购邀约&#xff0c;并在上周六下午将这一决定告知了其他竞购方&#xff0c;这场久拖不决的拍卖终于尘埃落定。 CEO玛丽莎梅耶尔自从上任以来一直在…

云服务器 ECS 建站教程:Drupal建站教程(CentOS7)

Drupal建站教程&#xff08;CentOS7&#xff09;Drupal是使用PHP语言编写的开源内容管理框架&#xff08;CMF&#xff09;&#xff0c;它由内容管理系统&#xff08;CMS&#xff09;和PHP开发框架&#xff08;Framework&#xff09;共同构成。它用于构造提供多种功能和服务的动…

云服务器 ECS 建站教程:ECS上搭建Docker(CentOS7)

ECS上搭建Docker(CentOS7)本文讲述Docker在CentOS系统上的部署过程。Ubuntu系统下安装docker&#xff0c;您可以点击此处查看。更多详细的实践您可以参考docker实践文档 适用对象 适用于熟悉Linux操作系统&#xff0c;刚开始使用阿里云ECS的开发者。 主要内容 部署dockerdocker…

python脚本根据cookies自动登录网站_Python爬虫利用cookie实现模拟登陆实例详解

Cookie&#xff0c;指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据&#xff08;通常经过加密&#xff09;。 举个例子&#xff0c;某些网站是需要登录后才能得到你想要的信息的&#xff0c;不登陆只能是游客模式&#xff0c;那么我们可以利用Urllib…

网站统计中的数据收集原理及实现

网站数据统计分析工具是网站站长和运营人员经常使用的一种工具&#xff0c;比较常用的有谷歌分析、百度统计和腾讯分析等等。所有这些统计分析工具的第一步都是网站访问数据的收集。目前主流的数据收集方式基本都是基于javascript的。本文将简要分析这种数据收集的原理&#xf…

理解mouseover,mouseout,mouseenter,mouseleave

mouseover定义和用法 当鼠标指针位于元素上方时&#xff0c;会发生 mouseover 事件。 该事件大多数时候会与 mouseout 事件一起使用。 mouseover() 方法触发 mouseover 事件&#xff0c;或规定当发生 mouseover 事件时运行的函数。 注释&#xff1a;与 mouseenter 事件不同&…

pdf在线翻译_PDF文件怎么翻译?有了这个网站,100页英文秒转中文

同学们在网上找外文文献的时候有没有这样的烦恼&#xff1f;下载下来外文文献很多都是PDF格式的&#xff0c;要翻译的时候简直头都秃了&#xff0c;不能复制&#xff0c;而且还有很多专业词汇特别难懂&#xff01;那么PDF文件要怎么快速翻译呢&#xff1f;别急&#xff0c;今天…

xbwseo_admin.php,小霸王系统SEO站群v6.3免授权无限制版带安装教程

菜鸟源码分享最新价值600元的小霸王SEO站群v6.3免授权无限制版安装教程&#xff0c;好源码站长测试源码安装和后台的功能保存正常&#xff0c;添加网站域名和前端展示正常。一、系统需求基本需求&#xff1a;php 伪静态(必须)配置&#xff1a;系统: windows/linuxweb服务器: i…

java编写一个为网站生成验证码的程序_Java后端产生验证码后台验证功能的实现代码...

直接跳severlet在java后台生成验证码&#xff1a;RequestMapping(value"yzm.action")public void Yzm(HttpSession session,HttpServletResponse resp){// 验证码图片的宽度。int width 60;// 验证码图片的高度。int height 20;// 验证码字符个数int codeCount 4;…

php网站目录分配,windows+nginx配置站点目录发生500的一个问题

用phpstudy配置一个站点的时候,发现一直报错500,后来查看了下error.log.报错如下:而phpstudy站点配置如下:server {listen 80;server_name www.cn ;root "F:\work\www\test_for_windows";location / {index index.html index.htm index.php;#autoindex on…

云服务器 cvm mysql_腾讯云服务器建站系列 - 腾讯云CVM选择以及系统安装篇

老蒋前天遇到一个比较小白的网友&#xff0c;估计之前从来没有建站过&#xff0c;然后不懂为何还购买了腾讯云服务器。而且&#xff0c;服务器中什么都没有安装&#xff0c;只是在本地电脑中可以打开PHPSTUDY测试环境搭建的网站&#xff0c;问怎么无法打开域名直接打开服务器的…

ep by Step WebMatrix网站开发之一:Webmatrix安装

WebMatrix是微软提供的一个完全免费的Web开发工具&#xff0c;工具内已集成web服务器、数据库和程序架构。笔者最感兴趣的是新的Razor&#xff0c;一个ASP.NET新的视图引擎。该引擎很好的将服务器代码和HTML代码融合在一起&#xff0c;使代码非常容易阅读和理解&#xff0c;而且…