jquery - jQuery - 悬停不工作

Question

有点麻烦.hover()

我正在抓取一些运球镜头，这些镜头在页面加载时被拉入。由于某种原因，通过悬停添加一个类不想对它们起作用。

尽管它与标准列表一起工作得很好。

jsFiddle在这里

JS：

$("#dribbble li").hover(

function () {
    $(this).addClass("hover");
},

function () {
    $(this).removeClass("hover");
});

HTML

<div id="dribbble">
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

使用委托 - 我猜你的元素没有被绑定，因为它们在绑定时在 dom 中不可用

$("#dribbble").on({
    mouseenter: function () {
       $(this).addClass("hover");
    },
    mouseleave:function () {
       $(this).removeClass("hover");
    }
},'li');

此外，如果您希望它优先于其他样式，您必须更具体地使用您的 css

#dribbble li.hover {
    background-color:aqua;
}

小提琴

Answer 2

您需要将事件处理程序附加到已经存在的元素。当您创建 li 元素时，您必须绑定到父元素，然后过滤到您需要的元素（如果正确完成，这实际上是可取的）。

尝试：

$("#dribbble").on('mouseenter','li',function () {
    $(this).addClass("hover");
});

$("#dribbble").on('mouseleave','li',function () {
    $(this).removeClass("hover");
});