Запретить срабатывание :hover css до повторного наведения без js?

Question

[amVeronika]

У меня чекбокс кастомный(в виде прямоугольной кнопки) - задний фон белый.
При наведении, когда input not(:checked), background с белого меняется на синий путем выезжания слева направо псевдоэлемента ::before. При отведении мыши с input, задний фон просто становится opacity = 0.
Сам input в момент :checked меняет задний фон на синий.
При повторном :hover, когда элемент :checked, задний фон - background становится белым. Таким же путём, выезжания слева направо псевдоэлемента только уже ::after.
Всё бы ничего, но при наведении мыши на input , когда белый фон к примеру сменится на синий и я нажимаю @click, то тут же применяется второй :hover...

<div>
   <input id="id">
   <label for="id"><span></span>
   </label>
</div>


input + .wrap {
    cursor: pointer;
    position: relative;
    overflow: hidden;

    $radius: 40;
    $base-px: 16;

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        background: blue;
        box-shadow:
            inset 0 0 em(50, $base-px) rgb(255 255 255 / 5%),
            inset 0 em(3, $base-px) em(3, $base-px) rgb(255 255 255 / 15%);
        border-radius: em($radius, $base-px);
        opacity: 0;
        transform: translateX(-101%);
        transition: transform 0ms ease 340ms, opacity 300ms ease;
        z-index: 1;
    }

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        background: white;
        box-shadow:
            inset 0 0 em(50, $base-px) rgb(255 255 255 / 5%),
            inset 0 em(3, $base-px) em(3, $base-px) rgb(255 255 255 / 15%);
        border-radius: em($radius, $base-px);
        opacity: 0;
        transform: translateX(-101%);
        transition: transform 0ms ease 340ms, opacity 300ms ease;
        z-index: 1;
    }

    // fix safari bug
    isolation: isolate;
}
input:not(:checked) + .wrap{
    background: white;
    color: black;
    transition: color 0.55s ease, background 0.55s ease;

    &:hover {
        color: white;
        transition: color 0.55s ease 300ms;

        &::after {
            opacity: 0;
        }

        &::before {
            opacity: 1;
            transform: translateX(0);
            transition: transform 300ms ease 300ms, opacity 0ms ease 300ms;
        }
    }
}
input:checked + .wrap {
    background: blue;
    color: white;

    //transition: color 0.55s ease, background 0.55s ease;

    &:hover {
        color: black;
        transition: color 0.55s ease 300ms;

        &::before {
            opacity: 0;
        }

        &::after {
            opacity: 1;
            transform: translateX(0);
            transition: transform 300ms ease 300ms, opacity 0ms ease 300ms;
        }
    }
}

Comments

[Farkl]

можно сделать класс который будет иметь стили hover и через mouseover/mouseleave уже работать с этим классом

[amVeronika]

Farkl, это через js

[Farkl]

amVeronika, а нафига у тебя в тегах vuejs?

[amVeronika]

Farkl, проект полон анимаций. И эту часть надо помаксимум на CSS свойствах реализовать. Иначе задача проще была бы

[Farkl]

amVeronika, ты так на вопрос почему в тегах vuejs стоит и не ответил

[amVeronika]

Farkl, на автомате ‍♀️