CSS переход только на не активный

Question

У меня есть сценарий, в котором мне нужно немедленно изменить цвет фона при наведении курсора и сразу же вернуться к исходному цвету при выводе.Это достаточно просто с:

#el {
    background-color: black;
}
#el:hover {
    background-color: gray;
}

Однако у меня возникла проблема, когда мне также нужно немедленно изменить цвет фона на активный, но использовать переход, когда активен отпущен.

#el:active {
    background-color: green;
}

#el:hover:deactivate { /*does not exist*/
    background-color: gray;
    transition: background-color 1s ease;
}

#el:deactivate { /*does not exist either*/
    background-color: black;
    transition: background-color 1s ease;
}

Я не могу сделать это, установив #el: hover, потому что тогда запись hover также становится анимированной, и я не могу сделать это на самом #el, потому что тогда деактивация также становится анимированной.

IsЕсть ли способ сделать это с использованием чистого CSS и без JS?

Answer 1

Вы можете смоделировать это, используя псевдоэлемент, и вы сможете управлять двумя разными вещами.Наведение изменит фон, а активное состояние изменит псевдоэлемент:

#el {
  color: white;
  background-color: black;
  border: 1px solid white;
  height: 200px;
  width: 200px;
  position:relative;
  z-index:0;
}
#el:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  transition:1s;
}

#el:hover {
  background-color: gray;
}

#el:active::before {
  background: green;
  transition: 0s;
}

<div id="el">
  CONTENT HERE
</div>

Answer 2

Вы можете использовать :not(:active)

#el:active {
    background-color: green;
}

#el:not(:active):hover {
    background-color: gray;
    transition: background-color 1s ease;
}

#el:not(:active) {
    background-color: black;
    transition: background-color 1s ease;
}

<a href="#" id="el">active</a>