Сделайте так, чтобы элемент on-hover :: before не появлялся во время первого клика - PullRequest
Новая
       81

Сделайте так, чтобы элемент on-hover :: before не появлялся во время первого клика

0 голосов
/ 05 апреля 2020

Итак, у меня есть анимация элемента ссылки, где по умолчанию это просто текст (: hover заставляет его менять цвет), но если ссылка имеет класс «.linke-active»,: hover теперь добавляет анимированное подчеркивание через :: before псевдоэлемент.

Итак, что я сделал, это было так: 

&.link-active {
position: relative;

&::before {
    content: ' ';
    position: absolute;
    height: 2px;
    background: red;
    bottom: 10px;
    width: 100%
    transition: 250ms ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
}

&:hover, &:focus {

    &::before {
        transform: scaleX(1);
    }
}}

Так что это довольно просто.

Он ведет себя отлично, когда я наводю указатель мыши на активную ссылку и когда я наведу курсор мыши на неактивную ссылку.

Моя проблема заключается в том, что когда я выполняю ПЕРВОНАЧАЛЬНЫЙ ЩЕЛЧОК, который приводит к получению ссылки. Active-active, то есть: before psuedoelement автоматически появляется, и так как моя мышь, очевидно, находится в положении ON во время щелчка по ссылке, psuedolement находится в состоянии наведения.

Есть ли способ сделать так, чтобы псевдоэлемент НЕ находился в состоянии наведения при первом щелчке? Или есть лучший способ активировать этот набор правил?

Спасибо!

...