微信如何做模板下载网站,个人购买域名做企业网站,公司网站的宣传栏怎么做,取消网站备案今天项目中UI设计了一个鼠标划入和划出的效果#xff0c;本来这个小效果是非常简单的#xff01;可是在实际的生产环境中就出现了一点点问题#xff01;因为在实际的环境中#xff0c;数据全部是用ajax异步加载进去的#xff0c;这样就造成了hover方法不能用了。先看一下原…今天项目中UI设计了一个鼠标划入和划出的效果本来这个小效果是非常简单的可是在实际的生产环境中就出现了一点点问题因为在实际的环境中数据全部是用ajax异步加载进去的这样就造成了hover方法不能用了。先看一下原来的代码 1 $(ul li).hover(function(){
2 $(this).addClass(hover);
3 },function(){
4 $(this).removeClass(hover);
5 }) 原理也非常简单就是在鼠标进入的时候给这个Li加入hover的类名然后鼠标划出的时候删除这个类名。非常简单的小效果。ajax异步加载我们就要用时间绑定了把这个事件绑定在他们的父元素ul上li是动态异步添加的于是有了下面的代码 1 $(ul).on(hover,li,function(){
2 $(this).addClass(hover);
3 },function(){
4 $(this).removeClass(hover);
5 }) 后来发现并不能行啊想想也是啊为什么第三个参数 这里就要复习一下on的用法了我们这里用的on事件其实是原来的delegate事件。详细的信息请移步http://www.runoob.com/jquery/event-on.htmldelegate中第二个参数也就是咱们写的Li是必须的不能缺少。如果不懂得话可以百度也可以查看下面的链接http://www.jb51.net/article/46224.htm 而且我还发现hover是jQuery自己封装的函数并不是javascript的函数并且
jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。
也就是说hover时间在不同的jq版本中是不一样的mouseenter是没有冒泡事件的而mouseover会发生冒泡时间mouseleave和mouseout一样。具体情况请看下面的小实验http://www.runoob.com/try/try.php?filenametryjquery_event_mouseenter_mouseover 相信看了这个后就非常清楚了。 回到咱们的问题如果想给异步加载的Li加载上鼠标划入和划出事件那就只能自己绑定两个事件了 $(ul).on(mouseenter, li, function() {//绑定鼠标进入事件
$(this).addClass(hover);
});
$(ul).on(mouseleave, li, function() {//绑定鼠标划出事件
$(this).removeClass(hover);
}); 这样的话就能实现鼠标的事件了 更多专业前端知识请上
【猿2048】www.mk2048.com
