如何添加标题到缩略图悬停 - Bootstrap？ [英] How to add caption to thumbnail hover - Bootstrap?

问题描述

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

然后添加hide（）方法，然后添加一个div ）或show（）根据Bootstraps滑动等。

FIDDLE

HTML：

 < li class =span3> 
< div class =thumbnail> 
< div class =caption> 
< h4>标题标题< / h4> 
 
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt。< / p> 
< p>< a href =＃class =btn btn-inverse =tooltiptitle =Preview>< i class =icon-eye-open> < / i>< / a> < a href =＃ =tooltiptitle =Visit Websiteclass =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/600x400alt =ALT NAME> 
< / div> 
< h4>项目名称< / h4> 
 
< / li> 
  

CSS：

 code> .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 b $（this）.find（'。caption'）。slideUp（250）; 
 $（'。caption-btm'）。show（450）; 
} 
   

EDIT

上面的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）; 
}）; 
  

I am trying to use this thumbnail hover caption plugin for bootstrap.

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

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/

NO HOVER

HOVER

This is the jsfiddle page http://jsfiddle.net/g4j8B/

解决方案

You need to place another div above the image and style it to your needs.

Then add the hide() or show() according to the Bootstraps sliding etc.

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

EDIT

The above Jquery will show and hide every .caption-btm.

But this will hide the specific one that it's being hovered over:

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

这篇关于如何添加标题到缩略图悬停 - Bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！