使用CSS和JQUERY在圖像上顯示標題

Question

我有以下jsfiddle，但它似乎沒有顯示標題： http : //jsfiddle.net/KumcX/189/

HTML：

<ul>
<li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
</ul>

CSS：

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
ul li div{display:none; background:white; opacity:.5; position:absolute;}

JS：

$('ul li').mouseenter(function(){
    var image= $(this).find('a img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeIn();
}).mouseleave(function(){
     var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeOut();
});

它應該顯示標題，但不顯示標題。有什么想法嗎？

Answer 1

您可能使用firebug復制了html，

刪除li元素上的樣式。

檢查此http://jsfiddle.net/kuyabiye/KumcX/194/

Answer 2

重構了一些JS，放棄了內聯標題樣式，並更新了CSS類

jQuery的

$(".caption").css('opacity', 0);

$('ul li').mouseenter(function() {    
    $(this).find(".caption").animate({ 'opacity': 0.9 });
}).mouseleave(function() {
    $(this).find(".caption").animate({ 'opacity': 0 });
});​

的CSS

ul li {
    float:left; 
    padding:20px; 
    border:solid gray 4px; 
    margin:5px;
}
.caption {
    width: 220px;
    background: #fff; 
    height: 150px;        
    position: absolute;
}​​​

例如 ： http : //jsfiddle.net/hunter/KumcX/201/

Answer 3

使用動畫效果，配置不透明度：

$('ul li').mouseenter(function(){
    var image= $(this).find('a img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.animate({'opacity':0.5});
}).mouseleave(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.animate({'opacity':0});
});

Answer 4

只需進行一些調整，首先在CSS中，您需要為<div>設置左和頂部的位置以及一些高度和寬度，我將其設置為100％以覆蓋圖像和<li>相對位置，因此字幕可以很好地定位在圖像上。 哦，我還給<div>背景設置了255,255,255,0.5的rgba顏色，以實現透明效果。

您的JS很好，但是您擺弄的問題是您有很多內聯樣式，因此請刪除這些樣式，然后從那時開始一切正常。

這是更新的小提琴： http : //jsfiddle.net/KumcX/197/

以及更新的CSS：

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;position:relative}
ul li div{display:none; background:rgba(255,255,255,.5); position:absolute;left:0;top:0;width:100%;height:100%;}

希望這會有所幫助。