慕课网

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)

这个事件就是这么简单，具体参考下右边代码的操作:

在右边代码42行处，填入任务

调用一个jquery一个方法，可以直接将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求