<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<STYLE>
.div3{background:red;width:100px;height:100px;position: relative;overflow: hidden}
.div4{background:green;width:50px;height:50px;position: absolute;top: -40px}
</STYLE>
</head>
<body>
<div class="div3"><div class="div4"></div></div>
<script>
// $(".div3").mouseover(function(){
// $(".div4").stop().animate({
// top:0
// },500)//子元素会受到冒泡机制影响，放到子元素上的时候会触发事件，stop()并不能完全阻止
// }).mouseout(function(){
// $(".div4").stop().animate({
// top:'-40px'
// },500)
// })
$(function(){
$(".div3").mouseenter(function(){ // 子元素不会触发父元素的事件
$(".div4").animate({
top:0
},500)
}).mousel(function(){
$(".div4").animate({
top:'-40px'
},500)
})
})
// hover()和mouseover mouseout 相同
</script>
</body>
</html>