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>
文章转自:林木森森森