:не псевдокласс отмена :анимация при наведении ⇐ CSS

[Anonymous]

У меня есть элемент внутри кнопки, который я хотел анимировать при наведении на него курсора, а также при нажатии на родительский элемент, кнопку.
Для этого я использовал :not и :active для анимации элемента после нажатия кнопки следующим образом:

Код: Выделить всё

.box {
display: flex;
justify-content: center;
width: 100vw;
height: fit-content;
background-color: wheat;
}

.box:not(:active) .el {
transform: rotate(360deg);
transition: all 1s ease;
}

.el {
width: fit-content;
font-size: 100px;
border: solid thin pink;
}

.el:hover {
transform: rotate(360deg);
transition: all 1s ease;
}

Код: Выделить всё

🐘

Когда я это делаю, элемент вращается только тогда, когда я нажимаю на его родительский элемент контейнер, а не при наведении указателя мыши.
Похоже, что первая анимация отменила анимацию наведения. Я не знаю, почему и как включить оба этих состояния анимации. У вас есть объяснение?

Подробнее здесь: https://stackoverflow.com/questions/781 ... -animation