mouseover mouseout和mouseenter mouseleave的区别
程序员文章站
2022-06-01 16:06:15
...
mouseover mouseout：在鼠标进入或者离开作用元素或者其子元素时，都会触发
在进入son的时候，因为离开了father，所以会触发一次mouseout，同理，在再次进入father的时候，也因为离开了son，所以先触发了一次mouseout再触发mouseover。
mouseenter mouseleave：在鼠标进入作用元素的时候才会触发。
以下是测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body{
margin-top: 100px;
margin-left: 100px;
}
.father{
width: 200px;
height: 200px;
background-color: blue;
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background-color: red;
margin:50px 50px;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('.father').mouseover(function(){
console.log('进入');
});
$('.father').mouseout(function(){
console.log('出去');
});
});
</script>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
上一篇： YY口试，对MVC框架M层的理解，求指导
下一篇： SQL Server 错误：15023
推荐阅读
-
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
-
jQuery中的mouseenter和mouseleave事件讲解
-
mouseleave和mouseout,mouseenter和mouseover，mouseover和mousemove三类比较分析
-
mouseover与mouseenter的区别
-
RollOver和MouseOver的区别
-
嵌套元素的mouseover和mouseout事件 mouseovermouseoutjquery
-
JQuery事件中mouseover与mouseenter以及mouseout与mouseleave的区别详解
-
jQuery中的mouseenter和mouseleave事件讲解
-
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
-
jquery中的mouseleave和mouseout的区别 模仿下拉框效果_jquery