jq的鼠标移入移除事件:mouseover()
鼠标移入(移入子元素也触发)mouseout()
鼠标移出(离开子元素也触发)mouseenter()
鼠标移入(移入子元素不触发)mouseleave()
鼠标移出(离开子元素不触发)hover()
鼠标移入移出(mouseenter与mouseleave的缩写)
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入移除</title>
<style type="text/css">
.parent {
width: 200px;
height: 100px;
margin: 100px auto;
padding: 20px 0;
background-color: pink;
cursor: pointer;
}
.child {
width: 80px;
height: 20px;
margin: 0 auto;
background-color: yellow;
text-align: center;
}
.drop {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
<div class="drop">我是鼠标移入显示的内容</div>
</div>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// mouseover 进入子元素也触发
// $('.parent').on('mouseover',function(){
// $(this).parent().find('.drop').fadeIn();
// })
// $('.parent').on('mouseout',function(){
// $(this).parent().find('.drop').fadeOut();
// })
// mouseover 进入子元素不触发
// $('.parent').on('mouseenter',function(){
// $(this).parent().find('.drop').fadeIn();
// })
// $('.parent').on('mouseleave',function(){
// $(this).parent().find('.drop').fadeOut();
// })
$('.parent').hover(function(){
$(this).parent().find('.drop').stop(false, true).fadeIn();
},function(){
$(this).parent().find('.drop').stop(false, true).fadeOut();
})
</script>
</body>
</html>
分析:
可以看出我的代码中使用了stop(),如果不使用效果则是移入移出多次,就会不停的显示显示隐藏,stop的作用就是结束当前动画。
stop的在JQ中的使用场景:
stop();//停止当前动画,继续下一个动画
stop(true);//清除元素的所有动画
stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态