Question

我正在尝试使用此缩略图悬停字幕插件进行引导。

http://sevenx.de/demo/bootstrap/thumbnail-hover-caption.html

这是代码。

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

在此页面中，有一个部分'SlideIn / Out'。

当您将鼠标悬停在缩略图上时，它会滑入或滑出。这就是我想要的。

然而，我还需要的是当我的光标没有悬停在缩略图上时，底部应该有一个小标题，我会在那里写一个标语。

所以基本上，默认位置将是小标题，当我的鼠标超过缩略图时，它将滑入。

这是我需要的一个确切示例。可以查看http://www.usatoday.com/news/

NO HOVER

enter image description here

HOVER

enter image description here

这是jsfiddle页面http://jsfiddle.net/g4j8B/

Answer 1

您需要在图像上方放置另一个div并根据需要设置样式。

然后根据Bootstraps滑动等添加hide（）或show（）。

FIDDLE

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：

.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);
                });

修改

上面的Jquery将显示并隐藏每个.caption-btm。

但这会隐藏它正在徘徊的特定一个：

FIDDLE

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); });

Answer 2

这是我的fiddle，请检查第一项。

我所做的是添加一些文字，然后在缩略图之后添加一些文字，并告诉它在用户悬停在缩略图上时隐藏：

.thumbnail:hover .front {
    display: none;
}

它不漂亮（为了这个例子，它有内联css），但我认为它可以做你想要的。

如何为缩略图悬停添加标题 - Bootstrap？

2 个答案: