css 如何使用伪类创建悬停时的mui过渡？

x759pob2 于 2022-11-26 发布在其他

关注(0)|答案(1)|浏览(143)

我有一个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

来源：https://stackoverflow.com/questions/74553977/how-to-create-a-mui-transition-on-hover-using-pseudo-classes

1条答案

按热度按时间

bogh5gae1#

看起来&::after在这里缺少content属性，并且它还需要一个opacity: 0来匹配:hover上的opacity: 1，这样就定义了一个转换。

'&::after': {
  // 👇 Try add this
  content: "''",
  // 👇 Perhaps also add this so it creates a transition
  opacity: 0,
  minHeight: "100vh",
  marginTop: 0,
  marginBottom: -50,
  justifyContent: "center",
  background: "linear-gradient(360deg, #dfe566 30%, #7DF334 70%)",
  transition: "all 3s ease",
};

赞(0）回复(0）举报 2022-11-26

我来回答

css 如何使用伪类创建悬停时的mui过渡？

1条答案

相关问题

热门标签

最新问答