jQuery迷你教程之Hover方法

日期：2011/12/31  来源：GBin1.com  

在jQuery开发过程中，我们常常需要设计一些相关鼠标悬浮的元素，比如，生成一个动态的提示菜单，或者悬浮的元素动画或者特效。这个过程往往需要调用jQuery的hover方法。一般使用如下代码：

$('.selectorClass').hover(
function(){
	$(this).stop().fadeTo('slow',0.4);
},
function(){
	$(this).stop().fadeTo('slow',1);
});

其实hover方法和jQuery的俩个方法调用效果一致，mouseleave和mouseenter，因此以上代码你也可以书写为如下形式：

$('.selectorClass').hover(function(){
	this.check = this.check || 1;
	$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
}); 

对于jQuery1.4来说，我们可以调用一个方法来实现以上代码：

$('.selectorClass').hover(function(){
	this.check = this.check || 1;
	$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
}); 

如果你刚开始使用hover的时候，可能会出现这样的设计，你需要hover到一个元素上后，希望能出现一个新的元素显示在被hover的元素上，这样你可能会看到这个新元素会不停的出现和消失，原因是在于当你调用hover后，新出现的元素覆盖了你hover的那个元素，因此其实是调用了mouseout，所以你会看到一个“永动器”一样的效果，不停的出现和消失。

来源：jQuery迷你教程之Hover方法