Javascript 在CSS中创建缩略图覆盖

我试图在我的缩略图上创建一个图层，显示一些关于照片的信息

我正在使用jQuery创建悬停效果

但我遇到了悬停问题，您可以在此处查看代码并预览：

My JS Code :
$('img').hover(function(){

        $(this).next('.mask').fadeIn();


    },function(){

        $(this).next('.mask').fadeOut();

    });

完整的CSS/HTML/JS代码：

---

我如何解决这个问题并使jquery正常运行？

因为您在

img

上方显示

.mask

而获得的效果。由于您的悬停事件处于

img

状态，因此将

.mask

置于其上方将触发

mouseleave

事件，该事件将再次淡出

.mask

。当

.mask

淡出时，您的鼠标现在悬停在

img

上，

.mask

将淡入并重复所有操作

---

我建议使用100%的CSS。没有必要使用JS。

我同意MiniGod的观点。您不一定需要为此使用jQuery，但可以。我更喜欢使用CSS3方法，因为它们的速度和易用性。我创建了一个覆盖类，然后添加了transition属性，这非常有用

.textoverlay h4 { 
         color: #fff; 
         display: inline; 
         font-family: 'Any Font here'; 
         font-size: 12px;  
         letter-spacing: 1.5px; 
         line-height: 14px; 
         margin-left: 8px; 
         margin-top: 51px;
         position: absolute; 
         visibility: visible; 
         z-index: 10; 
}

.textoverlay img { 
         margin-right: 22px;
        -moz-transition: opacity 0.3s ease-in-out; 
        -webkit-transition: opacity 0.3s ease-in-out; 
         transition: opacity 0.3s ease-in-out; 
}

请记住，我的h4定位非常特定于我的缩略图大小，您可能需要对此进行修补。另外，需要注意的是，这仅在IE 10+中受支持，因此这取决于您的受众是谁

---

我发现它有很好的CSS文档，可以提供最佳实践和解释，也可以提供帮助的JS.vHope

谢谢你的回答，那么这个代码无法修复？无论如何，我会寻找CSS替代方案，如何在CSSTry中实现同样的效果。您已经在

.mask ul.links li a上使用它作为
背景色