DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>19_事件切换title>
head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: olive;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 230px;
background: olive;
}
.div4 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: yellow;
}
.divText{
position: absolute;
top: 330px;
left: 10px;
}
style>
<body>
<div class="divText">
区分鼠标的事件
div>
<div class="div1">
div1.....
<div class="div2">div2....div>
div>
<div class="div3">
div3.....
<div class="div4">div4....div>
div>
<script src="js/jquery-1.10.1.js" type="text/javascript">script>
<script type="text/javascript">
$('.div1')
.mouseover(function () {
console.log('mouseover 进入')
})
.mouseout(function () {
console.log('mouseout 离开')
})
//下面这种，鼠标在div3与div4之间切换的时候是不会触发的
$('.div3')
.mouseenter(function () {
console.log('mouseenter 进入')
})
.mouseleave(function () {
console.log('mouseleave 离开')
})
script>
body>
html>