Question

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

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

但是我遇到了悬停问题，你可以在这里查看代码和预览：

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

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


    },function(){

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

    });

完整的CSS / HTML / JS代码：

jsFiddle 我怎样才能解决这个问题并使jquery悬停正常？

Answer 1

您获得该效果的效果是因为您在.mask上方显示img。由于您的悬停事件位于img，因此将.mask置于其上将触发mouseleave事件，该事件将再次淡出.mask。当.mask淡出时，您的鼠标现在悬停在img上方，.mask将会淡入并重复所有内容。

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

Answer 2

我同意MiniGod。你不一定需要使用jQuery，但你可以。我更喜欢使用CSS3方法来提高速度和易用性。我创建了一个overlay类，然后添加了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+中受支持，因此取决于您的受众群体。

我发现The Mozilla Developer Network有很好的CSS文档可以帮助您获得最佳实践和解释以及JS.vHope！

在CSS中创建缩略图叠加层

2 个答案: