JQuery对元素的Hover鼠标事件的操作
2011-01-25 阅读 36
使用各类导航、按钮、链接的时候，经常需要可靠办法实现鼠标划入mouse over、鼠标划出mouse out效果。
Jquery的hover()函数就是做这个的。
<pre class="brush:jscript;"> $('.selectorClass').hover(
function(){
$(this).stop().fadeTo('slow',0.4);
},
function(){
$(this).stop().fadeTo('slow',1);
});
```
<p>
hover函数有两个参数，第一个函数鼠标over时运行，第二个参数是鼠标out的时候运行的。</p>
<p>
函数内部可以使用this来访问出发该事件的元素对象。</p>
<p>
实际上，Jquery将第一个函数绑定在mouseenter事件，第二函数绑定在mouseleave事件上，所以也可以如下写：</p>
<pre class="brush:jscript;"> $('.selectorClass').mouseenter(function(){
$(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
$(this).stop().fadeTo('slow',1);
});
```
<p>
在Jquery 1.4以后的版本中，hover支持传递一个参数了。这个参数函数在mouseenter和mouseleave中都会被调用。这样可以使得代码更精简。</p>
<pre class="brush:jscript;"> $('.selectorClass').hover(function(){
this.check = this.check || 1;
$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});
```
<p>
函数中增加了this.check，用来判断是哪个事件被触发，交替的运行两个效果。</p>
<p>
同样推荐其他两个非常有用的触发函数，.slideToggle() 和 .toggleClass</p>
jquery Hover 鼠标 事件 mouseleave mouseenter slideToggle toggleClass
更新于 2023年03月28日
