Question

我试图复制http://www.stationfour.com/Work

上的某些功能

当您将鼠标悬停在图像上时，带有H2和H3的div会向上滑动。它在退出时向下滑动。

我的网站正在使用Bootstrap。我的代码与他们的代码（没有li标签）有点不同，但这不应该是一个问题。

这是我的代码：

<div class="col-md-3">
  <a href="http://avondaleriverside.com/all/mike/hash/hash.php" target="_blank">
    <img class="responsive" src="img/portfolios/hashing.png" alt="Hashing and Salting" width="" height="">
  </a>
  <div class="infoBox hidden" style="bottom: -50px; opacity: 0;">
    <h2>
      <a href="hash.php" target="_blank">Password Hashing &amp; Salting</a>
    </h2>
    <h3>
      Password Security
    </h3>
  </div><!-- / .infoBox -->
</div><!-- / .col-md-3 -->

和jQuery

$(div).hover(function () {
  $(this).removeClass("hidden");
  $(this).slideToggle(250);
}, function() {
    $(this).addClass("hidden");
});

我想这应该很简单，但我无法弄明白。任何帮助将不胜感激。

Answer 1

这是一个仅使用CSS完成它的jsBin。因为javascript，以及jQuery，100％不需要完成像这样的简单任务。

JsBin Link

这是CSS：

.box {
  position:relative;
  width:200px;
  height:200px;
  background-color: #fafafa;
  border: 1px solid #eee;
  overflow:hidden;
}
.box .info {
  width:100%;height:auto;
  position:absolute;
  left:0;
  bottom:-100px;
  opacity:0;
  padding: 10px;
  background-color: rgba(0,0,0, 0.75);
  color: #fff;
  /* transition */
  transition: all 250ms linear;
}
.box:hover .info {
  bottom:0;
  opacity:1;
}

jQuery - 替换类+向上滑动

1 个答案: