Question

基本上我希望缩略图悬停能够正常工作：caption应该在悬停时显示和/或隐藏。

请检查以下代码段以解决问题：

$(document).ready(function() {
  $('.caption').css('display', 'none');
  $('.thumbnail').hover(function() {
    $(this).siblings('.caption').slideDown(250);
  }, function() {
    $(this).siblings('.caption').slideUp(250);
  });
});

body {
  padding-top: 50px;
}

.thumbnail {
  position: relative;
  overflow: hidden;
}

.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(66, 139, 202, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: center;
  color: #fff !important;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="row">
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="http://lorempixel.com/400/300/sports/1/" alt="...">
        <!-- I know I need to place the Caption div section over here, but in my situation I want it down -->

      </div>
      <!--  this part isn't working on hover - I want this working -->
      <div class="caption">
        <h4>Thumbnail Headline</h4>
        <p>short thumbnail description</p>
        <p><a href="" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="" class="label label-default" rel="tooltip" title="Download now">Download</a></p>
      </div>
    </div>

  </div>

</div>
<!-- /.container -->

Answer 1

新的更正版本：

$(document).ready(function() {
$('.caption').css('display', 'none');
$('.hover').hover(function() {
    $(this).find('.caption').slideDown(250);
}, function() {
    $(this).find('.caption').slideUp(250);
});
});

https://jsfiddle.net/SeniorFront/qseg36x6/7/

缩略图悬停效果作为兄弟姐妹的标题

1 个答案: