悬停效果在ajax加载的内容上的工作方式很奇怪

Question

这是网站：http://www.webkunst.comeze.com/test/

如果你点击左边的图片，它会通过ajax加载页面内容(出现在右边的项目)。我的问题是，当我将鼠标悬停在项目上时，它会产生某种奇怪的行为，例如，如果我将鼠标悬停在4到9个项目上，它会显示隐藏的文本，但在前三个项目上，它真的很奇怪。

这就是我做效果的方法：

要显示文本，请在我的主要js上执行以下操作：

$(function(){
    $(document).on("mouseover",".item",function(){
        $(this).find(".art_title").fadeIn(200);
     });
     $(document).on("mouseleave",".item",function(){
        $(this).find(".art_title").fadeOut(200);
     });
});

为了实现黑色透明的悬停效果，我使用了这个教程：http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/，它使用css和.item .mask

这是我的标记：

​

我做错了什么，为什么要这么做？

我必须补充说，当页面不是通过ajax加载时，效果很好。

Answer 1

给你的.item元素position:relative css。

您的绝对.art_title元素将与页面顶部对齐(而不是与.item顶部对齐