<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>33-jquery移入移出事件</title>
<style type=”text/css”> /*样式开始*/
*{ /*表示 所选取的该元素以及其所属的子元素 */
margin: 0; /*外边距*/
padding: 0; /*内边距*/
}
.father{ /* 选中class叫父亲的div盒子*/
width: 200px; /* 宽：200像素*/
height: 200px; /* 高：200像素*/
background: red; /* 背景：红色*/
}
.son{ /* 选中class叫儿子的div盒子*/
width: 100px; /* 宽：100像素*/
height: 100px; /* 高：100像素*/
background: #0000FF; /* 背景：蓝色*/
}
</style>
<script src=https://www.2bp.net/wp-content/uploads/2021/09/b3a12275e76543cfa901ba652e58b0db.png alt=33-jquery移入移出事件>
// $(“.father”).mouseout(function(){ /*选择class叫父亲的div的鼠标移出事件*/
// alert(‘鼠标移出了父亲的盒子区域’) /* 弹出窗口’鼠标移出了父亲的盒子区域’*/
// })
/*mouseenter mouseleave 事件， 子元素被移入移出，不会触发父元素的事件 */
// $(“.father”).mouseenter(function(){ /*选择class叫父亲的div的鼠标移入事件*/
// alert(‘鼠标进入了父亲的盒子区域’) /* 弹出窗口’鼠标进入了父亲的盒子区域’*/
// })
// $(“.father”).mouseleave(function(){ /*选择class叫父亲的div的鼠标移出事件*/
// alert(‘鼠标移出了父亲的盒子区域’) /* 弹出窗口’鼠标移出了父亲的盒子区域’*/
// })
// $(“.father”).hover(function(){ /* 同时监听鼠标移入移出的事件用hover 子元素被移入移出，不会触发父元素的事件*/
// console.log(‘鼠标移入了’) /* 移入后调用*/
// }, function(){
// console.log(‘鼠标移出了’) /* 移出后调用*/
// })
$(“.father”).hover(function(){ /* 同时监听鼠标移入移出的事件用hover 子元素被移入移出，不会触发父元素的事件*/
console.log(‘鼠标移入移出了’) /*鼠标移入和移出都监听了*/
})
})
</script>
</head>
<body>
<div class=”father”> <!– class叫父亲的div盒子 –>
<div class=”son”> <!– class叫儿子的div盒子 –>
</div>
</div>
</body>
</html>