jquery中的hover方法教程—明河谈jquery

101 篇文章 1 订阅
41 篇文章 0 订阅

jQuery中的hover方法是个非常常用的方法,接受二个参数,第一个参数为鼠标移入对象时触发的事件,第二个参数为鼠标移出对象时触发的事件。

很多人误以为hover()是mouserover和mouseout的结合体,实际上不是。

hover =  mouseenter+mouseleave

mouseenter和mouseleave这二个事件,jquery新手应该会觉得很陌生,实际上它实现的功能和mouserover和mouseout是极为类似的,那为什么会出现这二个事件,而不使用mouserover和mouseout呢?

这就要从mouseout的诡异bug说起了,mouseout会在你离开子元素的时候就把事件冒泡到父元素上,也就是说不管你的鼠标是否还在父元素中,只要你一离开子元素,就会触发mouseout。

这说法非常的抽象,来看demo:

http://www.36ria.com/demo/hover/demo.html

尤其看下第三个关于mouseout的示例,你就会发现这个问题的所在。

例子的代码非常简单,这里就不再累述,重点说明下最后一个例子的写法:

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

留意了,这里的hover只有一个参数,也就是只有移入事件,但同样实现了移入和移出。那是如何实现的呢?
非常关键的一个属性:this.check

大家可以使用alert(this.check )试下,非常有意思,奇数为移入,而偶数为移出,但注意第一次移入为undefined,所以才需要this.check = this.check || 1;当this.check不存在时赋值1

文章引自:http://www.36ria.com/1756

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值