Как я могу навести мой :: после элемента в стиле компонента - PullRequest
Новая
       83

Как я могу навести мой :: после элемента в стиле компонента

0 голосов
/ 24 мая 2019

Я пытаюсь навести мой элемент ::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);
  }
}
`

1 Ответ

1 голос
/ 24 мая 2019

Вы не можете использовать :hover для псевдоэлемента ::after. Вы можете прочитать больше об этом в этом блоге Мартина Вольфа .

Код, который вы предоставили, не лучший для работы, так как в вашем проекте мало контекста, но он должен выглядеть примерно так в 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);
        }
    }
}
...