CSS转换仅在非活动状态下进行

我有一个场景，我需要立即改变悬停时的背景颜色，并在脱毛时立即恢复到原始颜色。这一点非常简单：

#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有什么方法可以做到这一点吗？

您可以使用

：not（：active）

#el:激活{
背景颜色：绿色；
}
#el:非（：活动）：悬停{
背景颜色：灰色；
过渡：背景色1s轻松；
}
#el:不（：活动）{
背景色：黑色；
过渡：背景色1s轻松；
}

---

您可以使用一个伪元素来模拟这个过程，您将能够管理两种不同的事情。悬停将更改背景，活动状态将更改伪元素：

#el{
颜色：白色；
背景色：黑色；
边框：1px纯白；
高度：200px；
宽度：200px；
位置：相对位置；
z指数：0；
}
#艾尔：以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景：透明；
过渡：1s；
}
#埃尔：悬停{
背景颜色：灰色；
}
#el:活动：：之前{
背景：绿色；
转换：0s；
}

满足于此

你能给我们看看你的htmlHere是一个JSF的例子吗？别认为这在CSS中是不可能的。你希望进入一个状态（“正常”状态）会被以两种不同的方式对待，这取决于它是从哪个状态进入的——但在CSS中没有办法进行区分。你的意思是什么？理论上，是的，但实际上，不是，因为#el:not（：active）：hover与#el:hover相同，悬停时会导致条目转换。在您对我的问题的评论中添加了一个JSFIDLE。我想您必须使用js或Jquery