jquery - 悬停动作不适用于动态创建的 UL

Question

我有一些显示 youtube vidz 列表的 html，它应该有一个悬停动作。当我创建此列表的静态时，它工作正常，但是当我尝试使用 jquery 动态创建它时，列表呈现但悬停效果不起作用。我已将其上传到我的网站以使其更易于查看（太多 .js 文件无法加载到小提琴中）。

在该页面上，第一个视频是静态视频，其余视频（在其下方的单独一行中）是动态加载的，这不起作用。我尝试排除一些 .js 文件，认为某处可能存在冲突，但似乎该样式未应用于动态代码。

任何帮助/方向表示赞赏！

score 3 · Accepted Answer

这是因为您在页面中添加动态内容之前使用 jQuery 添加动画。jQuery 不像 CSS，如果你用 jQuery 选择一个类并对其应用动画，它不会被添加到新元素上，jQuery 只会在调用时查看页面中的内容。

要快速测试这一点，请打开浏览器 JavaScript 控制台并hover_overlay();在页面加载后调用您的函数，您将看到动画已添加到动态添加的内容中。

score 1 · Accepted Answer

如果您更喜欢使用 jquery，则使用“on”事件，它可以轻松支持动态生成的事件。您可以将代码编写为

$(document).on("mousedown","id-of-element-to-be-hoverd",function(e){
     Your code....
});

score 0 · Accepted Answer

为什么不直接使用 CSS？

.hover_image{
  transition: all 1s ease-in;
}
.hover_image:hover{
  opacity: 0.2
}

3 回答 3