jQuery - 鼠标悬停无效

Question

我在使用 .hover() 的时候遇到了一些问题。

我正在获取一些 Dribbble 的截图，并在页面加载时将它们拉入。但是，通过悬停添加一个类不起作用。

然而，对于标准列表来说，它完全正常工作。

这里是 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>

- user1122925

---

你期望看到什么？你的CSS在哪里？ - Diodeus - James MacFarlane

你的悬停事件运行得非常好。由于jribbble插件不可见，可能是因为他们正在使用某种e.stopPropagation()代码。 - sdespont

Answer 1

使用委托 - 我猜测你的元素没有绑定是因为它们在绑定时不在DOM中可用。

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

如果你想让CSS样式优先于其他样式，则需要更具体地指定它们。

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

FIDDLE

- wirey00

Answer 2

您需要为已经存在的元素添加事件处理程序。由于您正在创建li元素，因此必须绑定到父级，然后筛选出所需的元素（正确执行时实际上是可取的）。

尝试：

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

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

- Ian Wood