很多时候,当点击一个盒子之后,会展开一个盒子,此时想在点击之后暂时取消被点击盒子的hover事件,下面直接上demo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Disable mouseout after click</title>
	<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
	<style>
		.sub-box{
			display:none;
			position:absolute;
			top:24px;
			left:-2px;
			width:100px;
			height:50px;
			border:2px solid #DADADA;
		}
		.native{
			position:fixed;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
			width:100px;
			height:24px;
			border:2px solid #DADADA;

		}
		.hover{
			border:2px solid #999;
		}
	</style>
</head>
<body>
	<div class="container native">
		<div class="sub-box"></div>
	</div>
</body>
</html>
<script>
	$(function(){
		$('.container').on({
			'click':function(){
				if($(this).hasClass('hover')){
					$(this).removeClass('hover');
					$('.sub-box').show();
					$(this).unbind('mouseover').unbind('mouseout');
				}else{
					$(this).addClass('hover');
					$('.sub-box').hide();
					$(this).bind('mouseover',function(){
						$(this).addClass('hover');
					});
					$(this).bind('mouseout',function(){
						$(this).removeClass('hover');
					});
				}
			},
			'mouseover':function(){
				$(this).addClass('hover');
			},
			'mouseout':function(){
				$(this).removeClass('hover');
			}
		});
	});
</script>