悬停时在 Material UI 中让一个 div 出现在另一个之前答案

【问题标题】：Make a div appear in front of another in Material UI when you hover悬停时在 Material UI 中让一个 div 出现在另一个之前
【发布时间】：2021-10-04 10:50:33
【问题描述】：

当我将鼠标悬停在<MediaCard/> 上时，如何让黑色透明 div 出现在它的前面？

这是我使用 Material UI 返回的内容：

    <Box>
  <Typography variant='h3'>Home Page</Typography>
  <Typography sx={{ 'margin': '15px 0' }}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Typography>
  <Container sx={{ marginTop: '100px' }}>
    <Grid container spacing={6}>
      {cards.map(card => {
        return (
          <Grid item>
            <MediaCard {...card} />
          </Grid>
        );
      })}
    </Grid>
  </Container>
</Box >

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您可以使用 CSS brightness 过滤器：

<CardMedia
  sx={{
    ":hover": {
      filter: "brightness(50%)",
      transition: "all .2s"
    }
  }}

现场演示

参考文献

【讨论】：

当我把它放在网格上时它工作了
@prs99 所以你想让效果应用到整张卡片上？为什么需要包裹在Grid 中？

【解决方案2】：

<Grid item sx={{ ":hover": { filter: "brightness(50%)" }, 
  transition: "all .2s" }}
>
  <MediaCard {...card} />
</Grid>

【讨论】：

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。