jQuery 如何为缩略图悬停添加标题 - Bootstrap？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17828896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add caption to thumbnail hover - Bootstrap?
提问by SNaRe
I am trying to use this thumbnail hover caption plugin for bootstrap.
我正在尝试使用此缩略图悬停字幕插件进行引导。
http://sevenx.de/demo/bootstrap/thumbnail-hover-caption.html
http://sevenx.de/demo/bootstrap/thumbnail-hover-caption.html
This is the code.
这是代码。
<div class="thumbnail">
<div class="caption" style="display: none;">
<h4>Caption Title</h4>
<p><a href="#" class="btn btn-inverse" rel="tooltip" title="" data-original-title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="" class="btn btn-inverse" data-original-title="Visit Website"><i class="icon-share"></i></a></p>
</div>
<img src="http://placehold.it/600x400" alt="ALT NAME">
</div>
In this page, there is a part 'SlideIn/Out'.
在此页面中，有一部分“SlideIn/Out”。
When you hover on a thumbnail normally it slides in or out. This is what I want.
当您通常将鼠标悬停在缩略图上时，它会滑入或滑出。这就是我要的。
However, what I also need is when my cursor is not hover on thumbnail, there should be small caption at the bottom which I will write there a tagline.
但是，我还需要的是当我的光标没有悬停在缩略图上时，底部应该有一个小标题，我会在那里写一个标语。
So basically, default position will be small caption, when my mouse is over thumbnail it will slide in.
所以基本上，默认位置将是小标题，当我的鼠标悬停在缩略图上时，它会滑入。
This is an exact example what I need. It can be viewed http://www.usatoday.com/news/
这是我需要的一个确切示例。可以查看http://www.usatoday.com/news/
NO HOVER
没有悬停
HOVER
徘徊
This is the jsfiddle page http://jsfiddle.net/g4j8B/
这是 jsfiddle 页面http://jsfiddle.net/g4j8B/
回答by designtocode
You need to place another div above the image and style it to your needs.
您需要在图像上方放置另一个 div 并根据您的需要设置样式。
Then add the hide() or show() according to the Bootstraps sliding etc.
然后根据 Bootstraps 滑动等添加 hide() 或 show() 。
HTML:
HTML：
<li class="span3">
<div class="thumbnail">
<div class="caption">
<h4>Caption Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a>
</p>
</div>
<div class="caption-btm">Lorem ipsum dolor sit amet, consectetur adipisicing eli...</div>
<img src="http://placehold.it/600x400" alt="ALT NAME">
</div>
<h4>Item Name</h4>
</li>
CSS:
CSS：
.caption-btm{
background: rgba(0,0,0,0.6);
width: 100%;
height: 30px;
position: absolute;
bottom: 4px;
color: #fff;
}
JQuery:
查询：
$('#hover-cap-4col .thumbnail').hover(
function() {
$(this).find('.caption').slideDown(250);
$('.caption-btm').hide(100);
},
function() {
$(this).find('.caption').slideUp(250);
$('.caption-btm').show(450);
});
EDIT
编辑
The above Jquery will show and hide every .caption-btm.
上面的 Jquery 将显示和隐藏每个 .caption-btm。
But this will hide the specific one that it's being hovered over:
但这将隐藏它正在悬停的特定内容：
Jquery:
查询：
$('#hover-img .thumbnail').hover(
function () {
$(this).find('.caption').slideDown(250);
$(this).find('.caption-btm').hide(250);
},
function () {
$(this).find('.caption').slideUp(250);
$(this).find('.caption-btm').show(250);
});
回答by António Regadas
Here is my fiddle, check the first item.
这是我的小提琴，检查第一项。
What i've done is add some text bedofre the caption and after the thumbnail and tell it to hide when the user hovers on the thumbnail:
我所做的是在标题和缩略图之后添加一些文本，并在用户悬停在缩略图上时告诉它隐藏：
.thumbnail:hover .front {
display: none;
}
It isn't pretty (it has inline css for the sake of the example), but i think it does what you want.
它并不漂亮（为了示例，它具有内联 css），但我认为它可以满足您的需求。
