鼠标悬停时父Div内子Div无法上移动画问题求助

问题原因 #

你的两个子div通过内联样式设置了transform: translate(Xpx, Ypx)，当父元素hover时设置transform: translateY(-10px)，这会完全覆盖子元素原本的transform属性，导致元素丢失初始定位，自然看不到预期的上移效果。另外，margin-top无效是因为子元素已通过transform定位，margin无法影响transform控制的位置。

修复方案 #

保留子元素初始的transform定位，在hover时叠加Y轴偏移，以下两种方式都可以实现：

方式1：直接合并transform值

在hover样式里保留子元素原本的X轴定位，只调整Y轴数值：

.profile-button:hover>div:nth-child(1) {
  transform: translate(13.5px, calc(43px - 10px)); /* 保留X轴，Y轴上移10px */
}
.profile-button:hover>div:nth-child(2) {
  transform: translate(17.5px, calc(-17px - 10px));
}

方式2：将内联样式移到CSS类（更规范）

把内联样式抽成独立CSS类，方便维护和修改，同时给子元素加上过渡动画：

/* 新增子元素样式类 */
.profile-top {
  height: 30px;
  width: 43px;
  background-color: lightblue;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: translate(13.5px, 43px);
  transition: transform 0.2s ease; /* 同步动画节奏 */
}

.profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-color: lightblue;
  transform: translate(17.5px, -17px);
  border: 3px solid green;
  transition: transform 0.2s ease;
}

/* 修改hover触发样式 */
.profile-button:hover .profile-top {
  transform: translate(13.5px, 33px); /* 43px - 10px = 33px */
}
.profile-button:hover .profile-avatar {
  transform: translate(17.5px, -27px); /* -17px -10px = -27px */
}

对应的HTML修改（移除内联样式，添加类名）：

<header style="background-color: grey;
                height: 100px;
                width: 100%;
                border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
                display: flex;
                align-items: center;">

  <div class="profile-button" style="overflow: hidden;">

    <div class="profile-top"></div>

    <div class="profile-avatar"></div>

  </div>
</header>

额外优化提示 #

• 给子元素添加transition属性，让上移动画和父元素的缩放动画同步，视觉更协调。
• 尽量避免内联样式，统一将样式写在CSS中，便于后续调试和维护。
• 注意拼写修正：secundairy-dark应为secondary-dark。

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