悬停效果对于加载ajax的内容很奇怪

Question

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

如果您点击艺术作品的左侧，它会通过ajax加载页面内容（右侧显示的项目）。我遇到的问题是，当我将鼠标悬停在物品上时，它会产生某种奇怪的行为，例如，如果我将鼠标悬停在4到9个项目上，它会显示隐藏的文字，但在前三项中，它真的很奇怪。 / p>

这就是我的效果：

要显示文字，这是我的主要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

的顶部