:not pseudo class cancel :hover animation

Question

I have an element inside a button that I wanted to animate when I hover it and also when I click on the parent element, the button.

For that I used the :not and :active pseudo-classes to animate the element after the button click like this :

.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;
}

<div class='box'><span class='el'></span></div>

When I do that, the element only rotate when I click to his parent container and not when I hover the el.

It seems like the first animation canceled the hover animation. I don't know why and how to enable those both animation states. Do you have an explanation ?

Answer 1

You can't do that without js. CSS :active transition will end when user action is finished

Answer 2

Here's an example of what you want to accomplish, but when the parent element is clicked the transition property won't work as expected in this scenario because transitions are applied only to properties that have changed. Since the :active state is only active while the mouse button is pressed, once you release the mouse button, the :active state is no longer applied, and thus, the transition doesn't complete.

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

.box: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;
}

<div class='box'><span class='el'></span></div>