<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入移出</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// $('#div1').mouseover(function () {
// $(this).stop().animate({marginvTop:50});
// })鼠标移入 移入子元素会触发 事件发生在谁身上 $(this)就是谁
// $('#div1').mouselout(function () {
// $(this).stop().animate({marginvTop:100});
// })鼠标离开 离开子元素会触发 会记录鼠标移入移出的次数 stop会将之前没有做完的结束,开始新的动画
// $('#div1').mouseenter(function () {
// $(this).stop().animate({marginvTop:50});
// })鼠标进入 子元素不触发
// $('#div1').mouseleave(function () {
// $(this).stop().animate({marginvTop:100});
// })鼠标离开子元素不触发
//简写mouseenter mouseleave
$('#div1').hover(function () {
$(this).stop().animate({marginvTop: 50});
//鼠标移入时
}, function(){
$(this).stop().animate({marginvTop:100});
//鼠标移出时
});
});
</script>
<body>
<div id="div1" class="box">
<div class="son"></div>
</div>
</body>
</html>
