jquery div caption hover the image

Question

У меня есть сценарий с циклами для генерации изображений миниатюр. Я добавляю div скрытый hover каждое миниатюру, чтобы показать ассоциированную подпись. Но я не в состоянии показать заголовок при наведении курсора мыши на изображение ..

Вот мой jsfiddle, чтобы понять: https://jsfiddle.net/mytom/zgytmyt0/

-> Я хочу показать заголовок, когда при наведении курсора мыши изображение и др скрыть заголовок при наведении мыши. КОД

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 SCRIPT:

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 и вы обнаружите, почему вам нужно изменить.

И работает Demo