mouseover，mouseout，mouseenter，mouseleave，hover

之前做鼠标移入一个div后显示一个半透明层这样的效果时出了点小问题，就是鼠标移上去后在这个半透明层上移动时会不断的闪烁。

今天再看时才发现原来我写的div跟这个半透明的div是同级的，怪不得会闪烁啦~那时居然没注意到，不过也用另一种方法解决了。

一直对mouseover， mouseout和mouseenter， mouseleave还有hover之间的区别很联系总是模模糊糊的~这回真去认真比对了下~

     mouseover - 鼠标指针经过任何子元素都会触发绑定在父元素上的mouseover事件
     mouseout - 鼠标指针离开任何子元素时都会触发父元素上的mouseover事件
     mouseenter - 鼠标指针经过绑定的元素时触发事件，经过其子元素时，不会触发事件
     mouseleave - 只有当鼠标离开绑定的元素时才会触发该事件
     hover！= mouseover+mouseout
     hover=mouseenter + mouseleave

实践了下：

.cont{
	position: relative;
	margin :0 auto;
	width:100px;
	height: 100px;
}
.parent{
	position: relative;
	width:100px;
	height: 100px;
	background: pink;
}
.hover{
	position: absolute;
	top:0;
	left: 0;
	width:100px;
	height: 100px;
	background: #ccc;
	display: none;

}

① hover事件

$(".parent").hover(function(){
	$(".hover").css("display","block");
	console.log("1")
},function(){
	$(".hover").css("display","none");
	console.log("2")

});

鼠标移入移出.parent div时控制台输出：

1

2

② mouseenter 和mouseleave事件

$(".parent").mouseenter(function(){
		$(".hover").css("display","block");
		console.log("1")
	});
$(".parent").mouseleave(function(){
		$(".hover").css("display","none");
		console.log("2")
});

鼠标移入移出.parent div时控制台输出：

1

2

③mouseover和mouseout事件

$(".parent").mouseover(function(){
		$(".hover").css("display","block");
		console.log("1")
	});
$(".parent").mouseout(function(){
		$(".hover").css("display","none");
		console.log("2")
});

鼠标第一次移入.parent div时，控制台输出：

1

2

1

移出时，输出：

2

这个就是传说中的冒泡事件了，才会在第一次移入.parent div时有两个1 出现，

第一个1是进入.parent div时触发的事件；

第二个1是进入.hover div时发生的mouseover事件向上冒泡到.parent div 触发的；

最后为什么木有两个2出现啊 冒泡吖~

这是因为最后移出时只是在.hover上发生的，有冒泡了，.parent 的移出在.hover的显示之前发生了，即第一个2