鼠标悬停元素跳动问题求助：仅需显示文本却反复重置

问题描述 #

想要实现鼠标悬停时显示文本的效果，但当前元素不断出现重置跳动的情况。尝试过将position改为absolute、将description移出父div并单独编写CSS样式，均未解决问题。

问题表现：鼠标悬停时元素先展开，随即又收缩，反复跳动。

原代码 #

CSS #

body {
  background-color: #666e8e;
  margin: 3rem;
}

#testlink {
  text-decoration: none;
}

#testlink:hover .titles {
  color: #3c2301;
  background: linear-gradient(#7bcfd7 25%, #D2B48C 75%);
}

.test {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: auto;
  height: 150px;
  background: linear-gradient(#e97e7e 25%, #3bcee5 75%);
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  color: white;
  box-shadow: 20px 20px rgba(0, 0, 0, .15);
  transition: all .8s ease;
  margin: 15px;
}

.test1:hover .description {
  display: block;
  pointer-events: auto;
}

.test:hover {
  border-radius: 0% 0% 90% 90% / 0% 0% 45% 45%;
  box-shadow: 10px 10px rgba(0, 0, 0, .25);
  width: auto;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: normal;
}

.description {
  display: none;
  position: relative;
  bottom: 400px;
  left: 0;
  width: 90%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

HTML #

<div class="test1">
  <a href="https://youtube.com" id="testlink" target="_blank">
    <h1 class="test">Testing Box</h1>
  </a>
  <p class="description">Test description</p>
</div>

问题原因 #

1. hover触发元素尺寸变化导致hover失效：鼠标悬停在.test上时，它的高度从150px变为450px，导致父元素.test1的高度瞬间增加，鼠标相对于元素的位置发生偏移，触发hover状态失活；元素恢复原高度后，鼠标又回到hover区域，再次触发展开，如此循环造成跳动。
2. relative定位影响布局：.description使用position: relative定位，即使设置了bottom:400px，它仍然会占据原位置的空间，进一步加剧父元素高度的波动，加重跳动问题。

解决方案 #

核心调整点 #

• 将.description移入.test内部，利用flex垂直布局控制显示，避免脱离布局流导致的位置混乱。
• 把hover触发逻辑绑定到父元素.test1上，避免子元素尺寸变化导致hover状态丢失。
• 用min-height替代固定高度，保留视觉展开效果的同时，确保鼠标不会因为元素位移离开hover区域。

修改后的代码 #

CSS

body {
  background-color: #666e8e;
  margin: 3rem;
}

#testlink {
  text-decoration: none;
  display: block; /* 让a标签占满父元素空间 */
}

.test {
  display: flex;
  flex-direction: column; /* 垂直排列标题和描述 */
  justify-content: center;
  align-items: center;
  position: relative;
  width: auto;
  min-height: 150px; /* 用min-height替代固定高度 */
  background: linear-gradient(#e97e7e 25%, #3bcee5 75%);
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  color: white;
  box-shadow: 20px 20px rgba(0, 0, 0, .15);
  transition: all .8s ease;
  margin: 15px;
  padding: 20px;
}

/* 父元素hover时控制子元素样式 */
.test1:hover .test {
  border-radius: 0% 0% 90% 90% / 0% 0% 45% 45%;
  box-shadow: 10px 10px rgba(0, 0, 0, .25);
  min-height: 450px;
  justify-content: flex-start; /* 标题靠上 */
  padding-top: 40px;
}

.test1:hover .description {
  display: block;
  pointer-events: auto;
}

.description {
  display: none;
  width: 90%;
  padding: 20px 0;
  margin-top: 30px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
  color: white;
}

HTML

<div class="test1">
  <a href="https://youtube.com" id="testlink" target="_blank">
    <h1 class="test">
      Testing Box
      <p class="description">Test description</p>
    </h1>
  </a>
</div>

说明 #

父元素.test1作为hover触发容器，无论子元素如何变化，只要鼠标在.test1范围内，hover状态就会保持；同时通过flex布局让描述文本自然跟随标题展开，彻底解决跳动问题。

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