jquery - 显示 的一部分而不是显示 : none for slide up text reveal

Question

我正在使用 CSS 和 JQuery 创建悬停时显示的向上滑动文本。我的挑战是我只能通过使用 display: none; 来创建这种效果类上的属性”。我希望在 <div> 中有标题(招生)，该标题目前处于隐藏状态，以便始终可见。

我已经链接到一些 jpg，它们直观地解释了我正在尝试做的事情。任何帮助，将不胜感激。谢谢!

这是我当前的代码:

$(document).ready(function() {
  $('.img_frame').hover(function() {
    $('.caption', this).slideToggle('slow');
  }, function() {
    $('.caption', this).slideToggle('slow');
  });
});

.img_frame .caption {
  display: none;
  opacity: 0.9;
  background-color: rgb(67, 121, 160);
  width: 100%;
  position: absolute;
  bottom: 0px;
  padding: 5px;
}

.blue_box {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 599px;
  background-color: rgb(67, 121, 160);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="admissions_link img_frame col span_4">
  <div class="blue_box caption">
    <h3>Admissions</h3>
    <p>We understand that parents often start this process with many questions about how to decide what is the best placement for their child. We encourage you to get to know Riverside School and learn how we have worked for over forty years in the Richmond
      community to serve the needs of students with dyslexia and other related language-based learning differences.</p>
    <a href="#" target="_blank">
      <h2 class="learn_btn">LEARN MORE</h2>
    </a>
  </div>
</div>

当前上滑效果:

所需的向上滑动效果:

Answer 1

您需要做的就是将您的 HTML 更改为

<div class="admissions_link img_frame col span_4">
  <div class="blue_box">
    <h3>Admissions</h3>
    <div class="caption"> <!-- new wrapper class -->
        <p>We understand that parents often start this process with many questions about how to decide what is the best placement for their child. We encourage you to get to know Riverside School and learn how we have worked for over forty years in the Richmond
  community to serve the needs of students with dyslexia and other related language-based learning differences.</p>
        <a href="#" target="_blank">
          <h2 class="learn_btn">LEARN MORE</h2>
        </a>
    </div>
  </div>
</div>

为清楚起见编辑:

我从包装器 div.blue_box 中删除了标题类，并在 h3 下创建了一个子包装器，因此当 javascript 关闭 div.caption 它只会关闭您想要隐藏的内容。