如何修复卡片hover层的glitch问题，实现悬停状态持久切换

问题分析 #

你当前的CSS把hover事件绑定在.description元素本身上，而初始状态下.description是100%高度覆盖整个图片，hover后高度变为30%——这会导致鼠标很容易离开.description的区域（因为它变小了），触发图层收回，产生闪烁的glitch效果。要解决这个问题，我们需要把hover的触发目标换成父容器.card，这样只要鼠标在整个卡片范围内（包括图片和展开/收起的图层），图层就会保持状态。

修改后的代码 #

CSS部分

.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;
  /* 确保卡片不会因为子元素绝对定位而塌陷，避免内容溢出 */
  overflow: hidden;
}

div.description {
  transition: height 500ms ease;
  position: absolute;
  bottom: 0px;
  width: 100%;
  /* 初始状态：只显示底部30%，相当于收起状态 */
  height: 30%;
  font-size: 15px;
  z-index: 99;
  background-color: #007bff;
  color: white;
  opacity: 0.7;
  overflow: hidden;
}

/* 当hover父容器.card时，展开图层到100% */
.card:hover .description {
  background-color: #7d7d7d;
  height: 100%;
  overflow: visible;
}

HTML部分（无需修改，保持原代码即可）

<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>

额外优化说明 #

• 给.card添加overflow: hidden，避免图层内容超出卡片边界，视觉更整洁
• 给transition加上ease缓动函数，让展开/收回的动画更自然流畅
• 调整了初始高度和hover高度的逻辑，贴合你描述的“向下展开”效果（如果你的需求是hover时收起图层，只需把初始高度和hover高度调换即可）

这样修改后，只要鼠标停留在整个卡片区域内，图层就会保持展开状态，只有当鼠标完全移出卡片时才会收回，彻底解决了闪烁的glitch问题。

内容的提问来源于stack exchange，提问作者Nik