mouseover/out和mouseenter/leave的区别及用法
今天在做下拉菜单练习时发现一些奇怪的问题，就是当用mouseover和mouseout时，当鼠标移动到下拉菜单时容易出现闪动，最后经过查资料发现
mouseover：无论鼠标指针穿过被选元素还是任何的子元素，都会触发mouseover事件，而mouseenter只有在鼠标指针穿过被选元素时，才会触发mouseenter事件；
mouseout ： 无论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件，而mouseleave只有在鼠标指针离开被选元素的时候，才触发mouseleave事件；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动下拉菜单</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".topnav").mouseenter(function(){
$(this).find("ul").slideDown("slow");
}).mouseleave(function(){
$(this).find("ul").slideUp("slow");
})
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px;}
.menu{ width:980px; margin:50px auto;}
.menu .topnav{ float:left; border-right:1px solid #fff; background:#FFE60C; width:140px;}
.menu .topnav ul{ display:none;}
.menu .topnav ul li{ border-bottom:1px solid #fff;}
.menu ul{ list-style:none; }
.menu li a{ color:#000; line-height:32px; padding:0 20px; width:100px; display:block; text-decoration:none;}
.menu li a:hover{color:#fff; text-decoration:none; background:#062723 url(images/slide-panel_03.png) 0 0 repeat-x;}
</style>
</head>
<body>
<div class="menu">
<ul class="level">
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
当用mouseover和mouseout时，js代码如下
<script type="text/javascript">
$(document).ready(function(){
$(".topnav").mouseover(function(){
$(this).find("ul").slideDown("slow");
}).mouseout(function(){
$(this).find("ul").slideUp("slow");
})
})
</script>
mouseover/out和mouseenter/leave的区别及用法相关推荐
- mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
1.mouseover事件与mouseenter事件 mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选 ...
- 鼠标浮动到表格的某行 背景颜色变化[mouseover mouseout 以及mouseenter mouseleave]
之前一直觉得很难,今天用到了 好像超级简单 <table id="tableData"><tr class="flag"><td& ...
- mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...
- 转载：mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...
- model.fit以及model.fit_generator区别及用法
model.fit以及model.fit_generator区别及用法_猫爱吃鱼the的博客-CSDN博客
- js中!和!!的区别及用法
js中!和!!的区别及用法 js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值, 1.!可将变量转换成boolean类型,null.undefined和 ...
- Python中threading的join和setDaemon的区别及用法 例子
Python中threading的join和setDaemon的区别及用法 Python多线程编程时,经常会用到join()和setDaemon()方法,今天特地研究了一下两者的区别. 1.join ...
- MySQL笔记10：engine=innodb和engine=myisam的区别和用法!
MYSQL中engine=innodb和engine=myisam的区别和用法! 区别 1.myisam类型不支持事务处理等高级处理,而innodb类型支持. 2.myisam类型的表强调的是性能,其 ...
- calloc、malloc、realloc函数的区别及用法
calloc.malloc.realloc函数的区别及用法! 三者都是分配内存,都是stdlib.h库里的函数,但是也存在一些差异. (1)malloc函数.其原型void *malloc(unsig ...
最新文章
- Mysql性能优化方案
- 防火墙双机热备三大协议（VRRP-VGMP-HRP）原理
- Python中用dict统计列表中元素出现的次数
- 《Two Dozen Short Lessons in Haskell》学习（十）- Private Definitions — the where-clause
- SAP与阿里云的深度合作 为企业提供领先的SaaS 服务
- [React] 尚硅谷 -- 学习笔记(四)
- mysql innodb 间隙锁_MySQL中InnoDB的间隙锁问题
- sqlalchemy mysql_SQLAlchemy(1)
- Python中列表的增、删、改、查、排序
- python输出运行时间_分析python程序运行时间的几种方法
- 【机器学习、神经网络】拟合非线性函数y = x**2 - 2（部分问题未解决）
- Android蓝牙开发实战总结
- 双人五子棋（C++游戏）游戏代码在最底下
- Delphi使用reportmachine导出pdf蓝色解决方法
- 大数据专业考研书_大数据考研
- MongoDB的分片集群
- 英语——长难句分析及技巧
- 实践练习二（必选）：手动部署 OceanBase 单副本集群
- BasicVSR_pp video2frame
- 类似 迈图7608 Monentive7608 上海荟研 高新材料 印刷油墨 合成革离型纸 水性涂料基材润湿剂 超润湿剂资料