如何实现鼠标悬停/移出时过渡，切换active类时无过渡？

我有一组可选中的标签页。当在标签的<span>元素上设置过渡效果后，鼠标悬停和移出时，背景色会呈现过渡动画，这是预期效果。但通过添加active类切换激活标签的代码，会导致激活状态变化时也有过渡，我希望激活标签的高亮能立即生效，无过渡效果。请问如何配置CSS，使得添加/移除active类时背景色无过渡，仅鼠标悬停/移出时保留过渡效果？

原代码 #

CSS #

.tabGroup {
display: flex;
flex-wrap: wrap;
padding: 3px;
border: 1px solid rgb(64, 64, 64);
border-radius: 15px;
}

.tabGroup li {
flex-grow: 1;
list-style: none;
}

.tabGroup li span {
display: block;
cursor: pointer;
padding: 5px 10px;
border-radius: 10px;
color: hsla(210, 2%, 81%, 0.7);
text-decoration: none;

transition: color 2s ease-in-out, background-color 2s ease-in-out;
}

.tabGroup li span:hover {
color: rgb(233, 236, 239);
background-color: rgb(20, 20, 20);
}

.tabGroup li span.active {
color: rgb(233, 236, 239);
background-color: rgb(64, 64, 64);
}

HTML #

<ul class="tabGroup">
<li>
    <span>Link</span>
</li>
<li>
    <span>Facebook</span>
</li>
<li>
    <span>Twitter</span>
</li>
<li>
    <span>Pinterest</span>
</li>
<li>
    <span>Telegram</span>
</li>
</ul>

解决方案 #

核心逻辑是：激活状态下移除过渡，确保切换时立即生效；同时为激活标签的hover状态重新添加过渡，保留悬停动画。

修改后的CSS代码如下：

.tabGroup {
display: flex;
flex-wrap: wrap;
padding: 3px;
border: 1px solid rgb(64, 64, 64);
border-radius: 15px;
}

.tabGroup li {
flex-grow: 1;
list-style: none;
}

.tabGroup li span {
display: block;
cursor: pointer;
padding: 5px 10px;
border-radius: 10px;
color: hsla(210, 2%, 81%, 0.7);
text-decoration: none;

/* 默认保留过渡效果 */
transition: color 2s ease-in-out, background-color 2s ease-in-out;
}

.tabGroup li span:hover {
color: rgb(233, 236, 239);
background-color: rgb(20, 20, 20);
}

/* 激活状态下移除过渡，确保切换时立即生效 */
.tabGroup li span.active {
color: rgb(233, 236, 239);
background-color: rgb(64, 64, 64);
transition: none;
}

/* 激活标签hover时重新添加过渡，保留悬停动画 */
.tabGroup li span.active:hover {
transition: color 2s ease-in-out, background-color 2s ease-in-out;
}

说明 #

1. 给active类设置transition: none;，添加/移除该类时，颜色和背景色会直接切换，无过渡动画。
2. 为active:hover单独配置过渡属性，保证激活标签在鼠标悬停、移出时依然有预期的动画效果。

内容的提问来源于stack exchange，提问作者Jez