为元素添加hover的事件代理

最新推荐文章于 2023-10-23 14:59:51 发布

转载最新推荐文章于 2023-10-23 14:59:51 发布 · 2.2k 阅读

本文介绍如何使用jQuery实现元素的鼠标悬停效果，并通过切换CSS类的方式改变边框颜色。详细展示了两种方法：一种是直接使用mouseenter和mouseleave事件；另一种是通过事件映射(map)方式实现多种事件响应。

$(selector).on(event,childSelector,data,function,map) 在传递到里面的参数中，只可以传一个function

切换class名称模拟

// js
$('ul.course_lists').on('mouseenter mouseleave','li',function(){ 
      $(this).toogleClass('border_color');
});

// css
.border_color{
    border-color:#ccc;    
}

li{
  border:1px solid #fff;
}

利用map模拟（未实现代理）

$('ul.course_lists li').on({
    mouseenter:function(){
        $(this).css('border-color','#ccc');
    },
    mouseleave:function(){
        $(this).css('border-color','#fff');    
    },
    click:function(){
        $(this).css('border-color','#666');
    } 
});