比较一下几个jquery事件的区别
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
用一个有背景的盒子为例子,加上margin-top的动画效果,使鼠标放在盒子上时,让margin-top的值变化而看到盒子上下移动;加上子盒子son后,观察鼠标移入移出小盒子中时的变化;以及解决方案:加入stop()的作用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ /* 进入子元素时会触发,这样写的话有一个bug,当鼠标快速移入移出目标区域时,目标区域会一直变换样式直到实现所有的效果次数。 加上stop()后,解决上面的bug $('#div1').mouseover(function(){ $(this).animate({marginTop:50}); }); $('#div1').mouseout(function(){ $(this).animate({marginTop:100}); }); */ /* 当box盒子里面有一个子元素son盒子时,当鼠标移入移出子元素时,也会触发上面的bug的动画效果 若想消除这个问题,需要用到mounseenter, mouseleave,这样进入子元素时不会触发bug效果 $('#div1').mouseenter(function(){ $(this).stop().animate({marginTop:50}); }); $('#div1').mouseleave(function(){ $(this).stop().animate({marginTop:100}); }); */ /* 通过hover简写上面的代码,其实就是hover()里面写2个function()作为参数 */ $('#div1').hover(function(){ $(this).stop().animate({marginTop:50}); },function(){ $(this).stop().animate({marginTop:100}); }); }) </script> <style type="text/css"> .box{ 200px; height:200px; background-color:gold; margin:100px auto 0; //居中 } .son{ 100px; height:100px; background-color:green; } </style> </head> <body> <div id="div1" class="box"> <div class="son"></div> </div> </body> </html>