如何解决修改margin时HTML卡片hover触发上下反复抖动的问题

问题根因 #

你修改margin-top会改变卡片在文档流中的实际位置，当鼠标悬停在卡片下半部分时，卡片上移后鼠标就脱离了卡片的触发范围，导致:hover失效，卡片回落再次触发:hover，就形成了振荡。你之前写的::after伪元素未生效是因为伪元素默认是行内元素，直接设置宽高不生效。

以下是三种纯CSS解决方案，按改动量从小到大排序： #

方案1：修复伪元素实现（完全保留原有逻辑）

给你的::after规则加上display: block，让它在卡片底部延伸出50px的隐形触发区，保证卡片上移后鼠标仍在触发范围内：

.card::after {
  content: "";
  display: block; /* 新增这行即可生效 */
  width: 60px;
  height: 50px;
}

方案2：用transform替换margin-top改动（代码改动最小）

transform属于视觉变换，不会影响其他元素布局，仅需要修改transition属性和hover样式即可实现效果：

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  border: 5px solid black;
  width: 60px;
  height: 100px;
  background-color: #F0F0F0;
  transition-duration: 0.3s;
  transition-property: transform, border; /* 修改transition对应属性 */
}

.card:hover {
  transform: translateY(-50px); /* 替换原margin-top: 0的设置 */
  border: 5px solid #3000A0;
  z-index: 1; /* 避免上移后被其他卡片遮挡 */
}

方案3：外层添加触发容器（兼容性最好，逻辑最稳定）

给卡片套一个固定高度的父容器，hover事件绑定在父容器上，完全规避触发范围偏移的问题：
HTML修改：

<div class="card-wrapper">
  <div class="card">Card</div>
</div>

新增CSS：

.card-wrapper {
  height: 150px; /* 高度=卡片高度100px + 上移距离50px，覆盖全部触发范围 */
  width: 70px; /* 包含卡片边框的总宽度 */
}

/* hover触发改在父容器上 */
.card-wrapper:hover .card {
  margin-top: 0px;
  border: 5px solid #3000A0;
  z-index: 1;
}

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