Question

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

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

感谢任何帮助/指示！

Answer 1

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

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

Answer 2

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

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

Answer 3

为什么不使用CSS？

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