淡入淡出div

我有一個包含圖像的div，當您將鼠標懸停在其上時，會出現另一個包含文本的div。有沒有一種方法（使用jQuery或CSS）添加淡入淡出效果？淡入淡出div

繼承人使用的代碼IM ...

.work_box1, .work_box2, .work_box3 { 
    display: inline-block; 
    height: 324px; 
    width: 324px; 
} 
.work_title { 
    display: none; 
    height: 100%; 
    width: 100%; 
} 
.work_box1:hover > .work_title, .work_box2:hover > .work_title, .work_box3:hover > .work_title { 
    display: block; 
}

來源

2013-10-17 user2246968

是。就在這裏。看看CSS3的過渡。 –

使用css3，除非你有IE8或更低版本 –

對於jQuery解決方案，如果你走這條路線，看看jQuery [.on（）]（http://api.jquery.com/on/）和[.fadeIn（）]（http://api.jquery.com/fadeIn/）如何使用jQuery來做到這一點。這可能是[google搜索]（https://www.google.com/search?q=jquery+fadein+on+hover&rlz=1C1CHFX_enUS492US492&oq=jquery+fadein+on+hover&aqs=chrome.0.69i57j0l3j69i62l2.5152j0&sourceid=chrome&ie=UTF -8）容易。 – smerny

CSS3 transitions可以做到這一點。但對於舊的瀏覽器不能做沒有JS在這裏是一個jQuery的解決方案：

$(".work_title").parent().hover(function() { 
    $(this).find(".work_title").fadeIn(); 
}, function() { 
    $(this).find(".work_title").fadeOut(); 
});

演示：http://jsfiddle.net/bddde/

來源

2013-10-17 19:45:14 nnnnnn

p。那隻小貓不可愛，它的醜陋;） – Accelerator

沒關係，貓仍然在懸停跳躍。 – Accelerator

@Accelerator - 這只是因爲OP的現有樣式。即使在OP的CSS中完成非動畫版本也會發生這種情況，所以修復它不在我的答案範圍之內。但仍然，這是一個不跳轉的版本：http://jsfiddle.net/bddde/1/ – nnnnnn

這裏是我走在它：http://jsfiddle.net/5c324/1/

$("#myBox").mouseenter(function() { 
    $("#myBox").fadeTo("slow" , 0.5, function() {}); 
}); 

$("#myBox").mouseout(function() { 
    $("#myBox").fadeTo("slow" , 1.0, function() {}); 
});

來源

2013-10-17 19:48:56

偉大---------- – Accelerator

如果我理解正確的話，將work_title類應用於覆蓋圖像的文本註釋。在這種情況下，當鼠標移過它們時，可以使用CSS3轉換將它們淡入淡出。

.work_title { 
    display: block; 
    opacity: 0.0; 
    height: 100%; 
    width: 100%; 
} 
.work_title:hover { 
    opacity: 1.0; 
    transition: opacity 0.3s ease; 
    -webkit-transition: opacity 0.3s ease; 
}

如果你想支持IE8，你必須包括filter以及opacity規則 - 我將離開你找出如何做到這一點:-)

來源

2013-10-17 20:01:46

回答

相關問題