CSS悬停退出时opacity过渡失效问题求助

问题描述 #

给元素悬停状态下opacity从0.2恢复到1的变化添加过渡效果时出现异常：

• 将transition: all 400ms ease-in-out;添加到CSS的ul:has选择器中，仅悬停触发时能得到预期的过渡动画；
• 退出悬停状态时，元素会立即跳转到opacity 1，没有应用过渡效果；
• 尝试在ul:after和li:after选择器中添加transition，问题依然无法解决。

解决方案 #

把transition样式直接添加到<li>内部的<a>和<span>元素上，而非仅在元素的状态伪类（如:hover）中设置。

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