如何修改CSS实现可折叠FAQ按钮hover时加号图标变为白色

解决方法 #

你之前的写法一是错误把伪类:hover写成了类选择器.hover，二是没有区分按钮的激活/未激活状态，才会导致样式异常。你只需要新增1条CSS规则即可实现需求：

/* 未激活状态的折叠按钮悬浮时，加号图标变为白色 */
.collapsible:not(.active):hover::after {
  color: white;
}

把上述规则添加到你的CSS文件中即可生效。

规则逻辑 #

• :not(.active) 筛选出还没有被点击展开、不带有active类的按钮，不会干扰已经激活的减号图标的原有样式
• 直接匹配未激活按钮悬浮状态下的after伪元素（也就是你定义的加号图标），修改它的文字颜色

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