如何使用悬停弹出窗口

Question

我有这个代码对它有悬停效果。我连续这四个图像，所有图像都有一个按钮和文本。当您将鼠标悬停在图像上时，图层会下降。但是一旦鼠标没有越过它就会发生什么呢？它会重新上升并产生这种奇怪的毛刺效应。我希望它能够保持下来，直到你再次将它悬停在它上面。

代码：

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
}

div.description {
  transition: height 500ms;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100%;
  font-size: 15px;
  z-index: 99;
  background-color: #007bff;
  color: white;
  opacity: 0.7;
  overflow: hidden;
}

div.description:hover {
  background-color: #7d7d7d;
  height: 30%;
  overflow: hidden;
}

<div class="container shadow" style="padding-top:35px;padding-bottom:35px;">
  <div class="row">
    <div class="col-md-3">
      <div class="card"><img src="g_suite.png" class="card-img-top w-100 d-block" />
        <div class="description text-center">
          <a href="#gsuite">
            <br> <button type="submit">LEARN MORE</button>
          </a>
          <br><br>
          <h5>G Suite<br><br>and<br><br>Workflow Automation</h5>

          <p1>Communicate, Collaborate and get things done</p1>
          <br><br>

        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card"><img src="imageedit_1_4644664391.png" class="card-img-top w-100 d-block" />
        <div class="description text-center">
          <br>
          <a href="#website">
            <button type="submit">LEARN MORE</button>
          </a>
          <br><br>
          <h5>Website</h5>
          <br>
          <p1>Preserve Franchise Integrity with new <br>corporate design and quality standards.</p1>
          <br><br>

        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card"><img src="two-squares_icon-icons.com_55537.png" class="card-img-top w-100 d-block" />
        <div class="description text-center">
          <br>
          <a href="#zig_air">
            <button type="submit">LEARN MORE</button>
          </a>
          <br> <br>
          <h5>ZigAir</h5>
          <br>
          <p1>Preserve Franchise Integrity with new <br>corporate design and quality standards.</p1>
          <br><br>

        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card"><img src="computer-phone-icon-78065.png" class="card-img-top w-100 d-block" />
        <div class="description text-center">
          <br>
          <a href="#it_assets">
            <button type="submit">LEARN MORE</button>
          </a>
          <br><br>
          <h5>IT Assets</h5>
          <br>
          <p1>IT products and management for you</p1>
          <br><br>

        </div>
      </div>
    </div>
  </div>
</div>