創建縮略圖疊加在CSS

我試圖創建一個顯示有關照片的一些信息對我的縮略圖層，創建縮略圖疊加在CSS

我使用jQuery創建懸停效果，

但我面臨的一個懸停的問題，你可以看看這裏的代碼和預覽：

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

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


    },function(){ 

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

    });

完整的CSS/HTML/JS代碼：

jsFiddle 我該如何解決這個問題，並使jquery懸停正常？

來源

2013-07-24 Khalid Khalil

你得到的效果是因爲你顯示.mask高於img。由於您的懸停事件在img上，因此將.mask置於其上會觸發mouseleave事件，該事件將再次褪去.mask。當.mask已經淡出，您的鼠標現在徘徊在img以上，.mask將淡入，一切都重複。

我建議爲此使用100％的CSS。 JS不需要。

來源

2013-07-24 01:42:06 MiniGod

感謝您的回答，那麼這段代碼無法修復？無論如何，我會尋找CSS的替代品， –

我如何使相同的衰落在CSS –

嘗試['transition']（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ Using_CSS_transitions）。您已經在'.mask ul.links li a'上將它用於'background-color' – MiniGod

我同意MiniGod。你不一定需要爲此使用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定位是非常具體的，以我的縮略圖的大小，你可能需要this.Also其重要鼓搗要注意，這僅是在IE中支持10+所以這取決於誰是你的觀衆是。

我發現The Mozilla Developer Network有最好的實踐和解釋以及JS.vHope幫助！

來源

2013-07-24 02:10:32 cpk

創建縮略圖疊加在CSS

回答

相關問題