如何将我的 ::after 元素悬停在样式化的组件中

Question

我尝试使用带样式的组件悬停我的 ::after 元素，但它不起作用。

下面我粘贴了我的代码，我希望它能正常工作，但实际上没有。

const Div = styled.div`
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
postition:relative;
&::after{
  content: '';
  background:rgba(255, 193, 5, 1);
  position:absolute;
  top:60%;
  left:-15%;
  width:20vw;
  height:20vw;
  border-radius:50%;
  &:hover{
    transform: scale(1.2);
  }
}
`

Answer 1

您不能在 ::after pseudo-element 上使用 :hover。您可以在 this blog by Martin Wolf.

中阅读更多相关信息

你提供的代码不是最好的，因为你的项目没有太多上下文，但它应该看起来像 Sass 中的那样（我假设你正在使用？ ).

.example-container {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    postition:relative;

    &::after{
        content: '';
        background:rgba(255, 193, 5, 1);
        position:absolute;
        top:60%;
        left:-15%;
        width:20vw;
        height:20vw;
        border-radius:50%;
    }

    &:hover {
        &::after {
            transform: scale(1.2);
        }
    }
}

如何将我的 ::after 元素悬停在样式化的组件中

How can I hover my ::after element in styled component

css

pseudo-element

gatsby

styled-components