如何用伪类实现Material UI悬停过渡？排查无效代码问题

我写了一段useStyles钩子代码，想实现全屏背景的鼠标悬停切换效果，但代码跑不起来。找到一个纯CSS的类似方案却能正常工作，请问问题出在哪？

无效代码 #

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    backgroundUser: {
      minHeight: '100vh',
      marginTop: 0,
      marginBottom: -50,
      justifyContent: 'center',
      background: 'linear-gradient(360deg, #fe6b8b 30%, #7DF9FF 70%)',
      '&::after': {
        minHeight: '100vh',
        marginTop: 0,
        marginBottom: -50,
        justifyContent: 'center',
        background: 'linear-gradient(360deg, #dfe566 30%, #7DF334 70%)',
        transition: 'all 3s ease',
      },
      '&:hover:after': {
        opacity: 1,
      },
    },
  })
);

可行的纯CSS示例 #

CSS代码 #

.FeatureRow {
  padding: 10px;
  display: block;
  position: relative;
  width: 260px;
  height: 70px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  background-image: linear-gradient(360deg, white, gray);
}

.FeatureRow:after {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-image: linear-gradient(360deg, red, magenta);
  opacity: 0;
  transition: all 3s ease-in-out;
}

.FeatureRow:hover:after {
  opacity: 1;
}

HTML代码 #

<div class="FeatureRow"></div>

问题根源 #

对比可行的CSS方案，你的useStyles代码缺了几个伪元素渲染和定位的核心属性：

• 缺少content: ''：CSS伪元素（::after/::before）必须设置content属性才会被浏览器渲染，你的代码里完全没加这一项。
• 没有定位规则：可行方案里给父元素加了position: relative，给伪元素加了position: absolute和left/top/right/bottom: 0，这样伪元素才能完全覆盖父元素。你的代码里既没给父元素设相对定位，也没给伪元素设绝对定位和位置，伪元素根本没法占满全屏。
• 初始透明度未设置：你的伪元素默认透明度是1，hover时改opacity:1等于没变化，看不到切换效果。

修正后的代码 #

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    backgroundUser: {
      minHeight: '100vh',
      marginTop: 0,
      marginBottom: -50,
      justifyContent: 'center',
      background: 'linear-gradient(360deg, #fe6b8b 30%, #7DF9FF 70%)',
      // 父元素设相对定位，作为伪元素的定位容器
      position: 'relative',
      '&::after': {
        // 必须添加content才能渲染伪元素
        content: '""',
        // 绝对定位让伪元素占满父元素
        position: 'absolute',
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        background: 'linear-gradient(360deg, #dfe566 30%, #7DF334 70%)',
        transition: 'all 3s ease',
        // 初始透明度设为0，hover时切换为1
        opacity: 0,
        // 可选：确保伪元素在父元素内容之上（如果有内容的话）
        zIndex: 1,
      },
      '&:hover::after': {
        opacity: 1,
      },
    },
  })
);

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