jquery div 标题悬停图像答案

【问题标题】：jquery div caption hover an imagejquery div 标题悬停图像
【发布时间】：2015-05-14 13:51:45
【问题描述】：

我有一个带有循环的脚本来生成缩略图。我为每个缩略图添加了一个隐藏的 div 悬停以显示关联标题。但是当鼠标悬停在图像上时，我无法显示标题..

这是我的 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 脚本：

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

谢谢！

【问题讨论】：

哪个div是caption的div？我找到了标题的 css 代码，但没有找到 html 代码。你确定你已经包含了所有的html代码吗？
div 与 addclass (thumcaption) 一起出现，在 thumb_img 类 Oups 之后。我不知道如何在 cmets 中插入代码
要在注释中添加代码，请参阅“添加注释”按钮下方的帮助
啊哈哈是的，谢谢！！我是零；）

标签： jquery css mouseover

【解决方案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

【讨论】：