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 来做到这一点，因为这样悬停条目也会被动画化，而我不能在 #el 本身上执行此操作，因为这样悬停也会被动画化。

有没有办法使用纯CSS和没有JS来做到这一点？

Answer 1

您可以使用: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>

Answer 2

您可以使用伪元素模拟这一点，您将能够管理两种不同的东西。悬停将更改背景，活动状态将更改伪元素：

#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>