javascript - Bootstrap 中的缩略图标题悬停效果

Question

我想在缩略图中有标题悬停效果，为此我做了这样的编码

$(document).ready (function() {

$ ('.thumbnail').hover(
    function( ) {
    $ (this).find ('.caption').slideDown(250); //.fadeIn(250)
},
function( ) {
$ (this).find ('.caption').slideUp(250); //.fadeOut(205)
}
);
});

.thumbnail {
position:relative;
overflow:hidden;
}

.caption {
position:absolute;
top:0;
right:0;
background:RGB( 5, 5, 5) ;
color:#FFFFFF;
text-align:center;
z-index:2;
width:100%;
height:100%;
padding:2%;
display:none;
}

<div class="col-sm-4">
  <div class="thumbnail">
  <img src="two.jpg" alt="two" class="align-center img-responsive">
  <div class="caption">
  <h3>Women's Clothing</h3>
 <p>Shop Now !</p>
 <p><a href="" class="label label-danger" title="Shop Now"></a>
  </div>
</div>
</div>

<div class="col-sm-4">
  <div class="thumbnail">
  <img src="three.jpg" alt="three" class="align-center img-responsive">
  <div class="caption">
  <h3> Juniors Clothing</h3>
      <p>Shop Now !</p>

      </div>
  </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4">
  <div class="thumbnail">
    <div class="caption">
     <h3>Men's Clothing</h3>
       <p>Shop Now !</p>
   </div>
 <img src="one.jpg" alt="one">
</div>
</div>

<div class="col-sm-4">
  <div class="thumbnail">
  <img src="two.jpg" alt="two" class="align-center img-responsive">
  <div class="caption">
  <h3>Women's Clothing</h3>
 <p>Shop Now !</p>
 <p><a href="" class="label label-danger" title="Shop Now"></a>
  </div>
</div>
</div>

<div class="col-sm-4">
  <div class="thumbnail">
  <img src="three.jpg" alt="three" class="align-center img-responsive">
  <div class="caption">
  <h3> Juniors Clothing</h3>
      <p>Shop Now !</p>

      </div>
  </div>
  </div>
</div>

在图像上，当我使用鼠标时，它只显示文本，但不显示上下滑动的缩略图。悬停功能。

任何人都知道我在编码方面做错了什么。

Answer 1

您的 CSS 有问题。见下文:

.caption {
position:absolute;
top:0;
left:0;
background-color:rgba(255, 255, 255, 0.58);
color:#FFFFFF;
text-align:center;
z-index:2;
width:180px;
height:90px;
padding:10px;
display:none;
}

http://jsfiddle.net/a7m2ce7u/1/