0

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

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

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

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

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


    },function(){

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

    });

完整的 CSS/HTML/JS 代码：

jsFiddle 我该如何解决这个问题并使jquery悬停正常？

4

2 回答 2

1

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

我建议为此使用 100% CSS。不需要 JS。

于 2013-07-24T01:42:06.160 回答
1

我同意迷你神。您不一定需要为此使用 jQuery，但您可以。我更喜欢使用 CSS3 方法，因为它们的速度和易用性。我制作了一个覆盖类，然后添加了过渡属性，这非常有用。

.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+ 中受支持，因此这取决于您的受众群体。

我发现Mozilla 开发者网络有很好的 CSS 文档，用于最佳实践和解释以及 JS.v 希望有帮助！

于 2013-07-24T02:10:32.790 回答