jQuery实现鼠标移入移出改变颜色, 以及on中的hover事件不生效的原因

• 在对运行时增加的标签绑定事件的时候必须使用on()来绑定

下面的代码是,如果li是在js中新增的,那么绑定是事件无效

 $("ul li").hover(function () {
        $(this).toggleClass("colorClassName")
    });

• 在使用on()绑定事件的时候,不能使用事件hover

下面写的hover事件不会生效

  $("ul").on("hover","li",function () {
        $(this).toggleClass("colorClassName")
    });

on绑定事件,不能使用hover,实际上hover是jQuery对mouseover mouseout的封装.然而在原生event中，并没有hover这一事件，所以在传递参数hover时，并不会有任何的效果。

---

• 结合上面写的错误示范,我们可以实现功能了,2行代码解决

实现鼠标移入移出改变颜色

 $("ul").on("mouseover mouseout","li",function () {
        $(this).toggleClass("colorClassName")
    });

---

解释下上面用到的事件和字符串的意义

• ul 是父标签
• li 是ul的后代标签
• hover是鼠标移入移出事件
• toggleClass是改变class属性值, 之前有就删除,没有就增加
• colorClassName是css属性, class 选择器增加的样式,在本案例里就是设置背景色

<style>
    .colorClassName{
        background-color: #2aabd2;
    }
</style>