mouseover()、 mouseout() 和 mouseenter()、 mouseleave()以及hover()的相同和不同点

<! 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 : 100 px ; height : 100 px ; position : relative ; overflow : hidden }

. div4 { background : green ; width : 50 px ; height : 50 px ; position : absolute ; top : -40 px }

< / 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 >