请求排查鼠标悬停时背景色从下到上动画失效问题

嘿，我来帮你排查这个背景动画的问题！从你给出的代码片段来看，首先你的.right-block--wrapper:before伪元素代码没写完，而且缺少实现从下到上过渡的关键配置，这应该是动画没生效的核心原因。

我给你整理了完整的修复方案，一步步来：

关键问题分析 #

• 伪元素缺少定位属性：没法控制它的初始位置和覆盖范围
• 没有设置过渡动画属性：状态变化时不会有平滑效果
• 缺少hover触发逻辑：没有定义悬停时伪元素的状态变化
• 父元素可能需要overflow:hidden：防止伪元素超出区块显示

完整修复代码 #

.right-block--wrapper {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 0 5px 1px rgba(50, 50, 50, 0.75);
  display: inline-block;
  margin-left: -30px;
  margin-top: 9px;
  padding: 15px 19px 12px;
  width: 100%;
  max-width: 429px;
  position: relative; /* 伪元素定位的基础 */
  z-index: 2;
  overflow: hidden; /* 隐藏超出父元素的伪元素部分 */
}

.right-block--wrapper:before {
  content: ""; /* 伪元素必须加content才能显示 */
  background: #474747;
  position: absolute; /* 绝对定位，相对于父元素 */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 占满父元素的宽高 */
  transform: translateY(100%); /* 初始状态：完全隐藏在父元素底部 */
  transition: transform 0.3s ease; /* 添加过渡动画，时长和缓动可调整 */
  z-index: -1; /* 把伪元素放在父元素内容的下面 */
}

.right-block--wrapper:hover:before {
  transform: translateY(0); /* 悬停时伪元素从下往上滑入 */
}

代码解释 #

• 给伪元素加上content: ""：这是CSS伪元素显示的必要条件，之前你漏掉了
• 绝对定位+宽高100%：让伪元素完全覆盖父元素的背景区域
• transform: translateY(100%)：初始时伪元素在父元素底部，完全看不到
• transition属性：定义状态变化的动画时长和缓动效果，让过渡更平滑
• hover时修改transform：触发伪元素从下到上移动，实现背景色过渡的视觉效果
• overflow: hidden：确保伪元素超出父元素的部分被隐藏，避免出现滚动条或者多余的视觉元素

这样调整后，鼠标悬停在.right-block--wrapper区块上时，就能看到背景色从下到上平滑过渡的效果啦！

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