父悬停

Question

我正在处理我的图库叠加层的标题，它会在悬停时移动到叠加层上，更改它的top属性，然后在鼠标移出时它会隐藏在缩略图。到目前为止，我已尝试过这种方式，但在.gallery-caption分别指定了一些属性后，我不确定如何在.gallery-item:hover选择.gallery-item:hover 。是否有一些聪明的解决方案，或者我应该使用jQuery？

＆＃13;

＆＃13;

.gallery {
  margin-top:50px;
}
.gallery-item {
  padding:0px;
  border:1px solid white;
  position:relative;
}
.gallery-overlay {
  background-color:rgba(255,255,255,0);
  position:relative;
  width:100%;
  transition:1s;
}
.gallery-overlay img {
  z-index:-1;
  position:relative;
}
.gallery-overlay:hover {
  background-color:rgba(255,255,255,.7);
  transition:1s;
}
.gallery-overlay:hover + .gallery-caption {
  top:-50px;
  transition:1s;
}
.gallery-caption {
  height:50px;
  display:none;
  position:absolute;
  transition:1s;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="gallery clearfix col-sm-10 col-sm-offset-1">
  <div class="row">
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
  </div>
  <!-- new row starts -->
  <div class="row">
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
    <div class="col-sm-4 gallery-item">
      <div class="gallery-overlay">
        <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
      </div>
      <p class="gallery-caption text-center">Item caption</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以为标题定义以下代码：

.gallery-caption{height:50px;
   display:none;
   position:absolute;
  transition:1s; 
  z-index:999}

为字幕项定义以下代码：

.gallery-item:hover .gallery-caption{display:block; }

Answer 2

我有一种感觉，这可以用CSS完成，但我会建议一个jQuery解决方案（悬停或类似。:)