jquery div標題懸停圖像

Question

我有一個腳本與循環來生成縮略圖圖像。 我添加一個div隱藏每個縮略圖以顯示關聯標題。 但我不能夠顯示字幕時，將鼠標放在圖片..

這裏是我的jsfiddle理解它： https://jsfiddle.net/mytom/zgytmyt0/

- >我要顯示的標題，當鼠標懸停在圖像等隱藏在mouseout上的標題。

CSS代碼：

#componentWrapper .thumbHolder { 
position:absolute; 
width:100%; 
height:107px; 
left:0px; 
bottom:0px; 
background:#222; 
overflow:hidden; 
display:block; 
} 
#componentWrapper .thumbContainer { 
position:absolute; 
height:67px; 
top:40px; 
/*left, width set in jquery*/ 
} 
#componentWrapper .thumbInnerContainer { 
position:absolute; 
height:67px; 
/*width set in jquery*/ 
top:0px; 
left:0px; 
} 
#componentWrapper .thumbs { 
position:relative; 
top:0px; 
left:0px; 
margin-right: 2px !important; 
width:100px; 
height:67px; 
float:left; 
background:#111; 
} 
#componentWrapper .thumb_img { 
position:relative; 
display:block; 
top:0px; 
left:0px; 
width:100%; 
height:100%; 
opacity: .3; 
-webkit-transition: opacity 0.5s ease-out; 
-moz-transition: opacity 0.5s ease-out; 
-ms-transition: opacity 0.5s ease-out; 
-o-transition: opacity 0.5s ease-out; 
transition: opacity 0.5s ease-out; 
} 
#componentWrapper .thumb_img:hover { 
opacity: 1; 
-webkit-transition: opacity 0.3s ease-out; 
-moz-transition: opacity 0.3s ease-out; 
-ms-transition: opacity 0.3s ease-out; 
-o-transition: opacity 0.3s ease-out; 
transition: opacity 0.3s ease-out; 
} 
/* thumb caption */ 
#componentWrapper .thumbCaptionHolder { 
background-color: rgba(0, 0, 0, 0.6); 
height: 67px; 
left: 0; 
/*overflow: hidden;*/ 
padding: 3px; 
position: absolute; 
top: 0px; 
width: 95px; 
} 
#componentWrapper .thumbCaption { 
color: #e5e5e5; 
font-family: sans-serif; 
font-size: 10px; 
cursor:default; 
} 

HTML代碼：

<div id="componentWrapper"> 
<div class="thumbHolder"> 
    <div class="thumbContainer" style="width: 1266px; left: 50px;"> 
    <div class="thumbInnerContainer" style="top: 0px; left: 0px; width: 8568px;"> 

    </div> 
    </div> 
</div> 
</div> 

JS腳本：

var thumbInnerContainer = $('.thumbInnerContainer'); 
var _item = [ 
    {id: 'GASFa7rkLtM', type: 'video', title: 'description1', 
    thumb: 'https://i.ytimg.com/vi/GASFa7rkLtM/mqdefault.jpg'}, 
    {id: 'R5txNOdumzQ', type: 'video', title: 'description2', thumb: 
    'https://i.ytimg.com/vi/R5txNOdumzQ/mqdefault.jpg'}, 
    {id: 'PELlHslllk0', type: 'video', title: 'description3', thumb: 
    'https://i.ytimg.com/vi/PELlHslllk0/mqdefault.jpg'} 
]; 

var len = _item.length,i = 0,thumb, div, _item; 

for (i; i < len; i++) { 
div = $('<div/>').addClass('thumbs').attr({ 
    'data-id': i + 1, 
    'data-type': _item[i].type 
}); 
div.attr('path', _item[i].id); 
div.appendTo(thumbInnerContainer); 

//create thumb 
thumb = $(new Image()).addClass('thumb_img').appendTo(div).attr('alt', _item[i].title).css({ 
    cursor: 'default' 
}).error(function (e) { 
    //console.log("thumb error " + e); 
}).attr('src', _item[i].thumb); 

// thumb title 
var thumbCaption = $('<div><p class="thumbCaption"><span>' + _item[i].title + '</span></p></div>').addClass('thumbCaptionHolder').attr('id', _item[i].id).appendTo(div).css({ 
    top: '0px', 
    display: 'none' 
}) 

// how to show thumbCaptionHolder div when mouseover the img???? 

} //end of loop 

謝謝！

Answer 1

好的，解決方案很簡單。

#componentWrapper .thumbs:hover > .thumbCaptionHolder{ 
    display:block !important; 
} 

您將需要!important或它不起作用。

你在jQuery代碼中也有一個小錯誤。

變化：

var thumbCaption = $('<div><p class="thumbCaption"><span>' + _item[i].title + '</span></p></div>').addClass('thumbCaptionHolder').attr('id', _item[i].id).appendTo(div).css({ 
    top: '0px', 
    display: 'none' 
}) 

到：

var thumbCaption = $('<div><p class="thumbCaption"><span>'+_item[i].title+'</span></p></div>').addClass('thumbCaptionHolder').attr('id',_item[i].id).appendTo(div).css({ 
    'top': '0px', 
    'display': 'none' 
    }) 

和here你發現你爲什麼需要改變。

And a working Demo