jq鼠标移入移出显示和隐藏_前端 jQuery鼠标移入移出

mouseover() 鼠标进入(进入子元素也触发)

mouseout() 鼠标离开(离开子元素也触发)

mouseenter() 鼠标进入(进入子元素不触发)

mouseleave() 鼠标离开(离开子元素不触发)

鼠标移入移出

.box{

width: 200px;

height: 200px;

background-color: gold;

margin: 100px auto 0;

}

.son{

width: 100px;

height: 100px;

background-color: green;

}

$(function(){

/*进入子元素也触发*/

/*$('#div1').mouseover(function() {

$(this).animate({marginTop: 50});//.stop()

});

$('#div1').mouseout(function() {

$(this).animate({marginTop: 100});//.stop()

});*/

/*进入子元素不触发*/

/*$('#div1').mouseenter(function() {

$(this).stop().animate({marginTop: 50});//

});

$('#div1').mouseleave(function() {

$(this).stop().animate({marginTop: 100});//

});*/

/*通过hover(mouseenter+mouseleave)实现简写*/

$('#div1').hover(function() {

$(this).stop().animate({marginTop: 50});

}, function() {

$(this).stop().animate({marginTop: 100});

});

})