引导程序中的缩略图标题悬停效果

Thumbnail Caption hover effect in bootstrap

本文关键字：悬停 标题 略图 引导程序      更新时间：2023-12-30

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

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

在图像上，当我拿鼠标时，它只显示文本，但拇指钉。上下滑动的悬停功能不显示。

任何人都知道，根据编码，我做错了什么。

这是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/

相关文章：