jQuery中的hover方法教程

鼠标移到这里
$('.selectorClass').hover(
function(){
	$(this).stop().fadeTo('slow',0.4);
},
function(){
	$(this).stop().fadeTo('slow',1);
});

使用mouseenter和mouseleave代替hover,可以看到效果一样

鼠标移到这里
$('.selectorClass2').mouseenter(function(){
	$(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
	$(this).stop().fadeTo('slow',1);
});

使用mouseover和mouseout代替hover,体会下其中的区别

鼠标移到这里
$('.selectorClass3').mouseover(function(){
	$(this).stop().fadeTo('slow',0.4);
}).mouseout(function(){
	$(this).stop().fadeTo('slow',1);
});

请在背景红色的层移进移出看看,你就会发现其中的问题。我是给整个“demoObject”层绑定了事件,按理说在其内部移动是不会触发mouseout事件的,诡异的当你在里面的子元素一进一出时,它居然冒泡触发父容器的mouseout事件!

鼠标移到这里
$('.selectorClass4').hover(function(){
	this.check = this.check || 1;
	$(this).stop().fadeTo('slow',
    this.check++%2==0 ? 1 : 0.4);
});