mouseenter和mouseover ，mouseleave 和mouseout ,hover的区别

以前也遇到过这种问题，就是做简单的动画的时候，经常闪退，这次又遇到了，就总结一下。

先来看一下mouseover和mouseenter的区别

下面的效果是我都是触发一次的效果。

结果就是mouseover会在移进的时候触发一次，在移出的时候又触发一次，那就是两次，没法实现顺畅的移进移出效果。

mouseenter 就是移进的时候触发那一次。

上面的代码也放一下：

    
    
    


mouseover 事件:不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
mouseenter 事件:只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

    
被触发的 Mouseover 事件次数：


    
被触发的 Mouseenter 事件次数：

js：

   var x = 0,y = 0;
    var div1 = document.getElementsByClassName("over")[0];
    div1.addEventListener("mouseover",function(){
        var span = this.getElementsByTagName("span")[0];
        span.innerText = (x +=1);
    },false);

    var div2 = document.getElementsByClassName("enter")[0];
    div2.addEventListener("mouseenter",function(){
        var span = this.getElementsByTagName("span")[0];
        span.innerText = (y +=1);
    },false);

然后自己就可以做一个小demo啦

效果就是单独的两个div，放在A上面 B出现，移出A的作用域 B就是消失，过程很流畅，可以试一下。

Html：

	



	

		
我是A
		
我是B
	
	

js：

      var timer=null;
	function a(){
		if(timer){
			clearTimeout(timer);
		}
		if($("#b").is(":hidden")){
			$("#b").show();
		}
	}
	function b(){
		clearTimeout(timer);
	}

	function c(){
		timer=setTimeout(function () {
			$("#b").hide();
		},100)
	}

就酱