如何仅通过CSS实现checkbox选中时移除hover变换动画

要实现当id为menu-check的复选框被选中时，移除.menu-btn hover状态下的那两段变换动画，只需要利用CSS选择器优先级，在复选框选中状态下重置对应元素的transform属性即可：

/* 保留你原有的hover样式 */
.menu-btn:hover > span:nth-of-type(2) {
    transform-origin: right;
    transform: scaleX(0.5);
}
.menu-btn:hover > span:nth-of-type(3) {
    transform-origin: left;
    transform: scaleX(0.5);
}

/* 新增选中状态下的重置样式 */
#menu-check:checked ~ .menu-btn:hover > span:nth-of-type(2),
#menu-check:checked ~ .menu-btn:hover > span:nth-of-type(3) {
    transform-origin: center; /* 重置为默认原点，可根据实际初始值调整 */
    transform: scaleX(1); /* 恢复原始缩放比例，取消hover时的缩放效果 */
}

简单说明 #

• 利用复选框的:checked伪类结合兄弟选择器~，精准选中激活状态下的.menu-btn
• 通过重置transform和transform-origin为初始值，直接覆盖原有hover样式的变换效果，避免干扰选中状态的动画
• 确保这段新增CSS放在原有hover样式的后面，保证优先级足够覆盖旧样式

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