jQuery鼠标事件之hover事件

学了mouseover、mouseout、mouseenter、mouseleave事件,也理解了四个事件的相同点与不同点,现在可以用来给元素做一个简单的切换效果

在元素上移进移出切换其换色,一般通过2个事件配合就可以达到,这里用mouseenter与mouseleave,这样可以避免冒泡问题

$(ele).mouseenter(function(){
     $(this).css("background", '#bbffaa');
 })
$(ele).mouseleave(function(){
    $(this).css("background", 'red');
})

这样目的是达到了,代码稍微有点多,对于这样的简单逻辑jQuery直接提供了一个hover方法,可以便捷处理

只需要在hover方法中传递2个回调函数就可以了,不需要显示的绑定2个事件

$(selector).hover(handlerIn, handlerOut)
  • handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
  • handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数
posted on 2017-08-10 13:41  廖利君  阅读(2261)  评论(0编辑  收藏  举报