悬停效果的作品在AJAX加载的内容奇怪

这里它的网站：http://www.webkunst.comeze.com/test/悬停效果的作品在AJAX加载的内容奇怪

如果你点击左边的作品，它通过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

，这是我的标记： enter image description here

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

我必须补充一点，当页面没有通过ajax加载时，效果很好。

来源

2012-10-12 codek

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

你绝对.art_title元素对齐到页面的顶部（而不是到的.item

顶部

来源

2012-10-12 14:40:37

悬停效果的作品在AJAX加载的内容奇怪

回答

相关问题