如何移除静态类的hover效果，仅保留is-active类的hover效果？

解决方案 #

你只需要调整CSS规则，给普通按钮的hover效果添加is-active类的排除逻辑即可，修改后的样式代码如下：

.c-button-toggle-wrapper
  display: flex
  justify-content: center
  align-items: center
  background: lavender
  width: max-content
  padding: 8px

.c-button
  background: transparent
  font-size: 14px
  font-weight: 500
  color: rgba(36, 42, 56, 0.75)
  border: none
  line-height: 1.715em
  text-transform: uppercase
  padding: 6px 16px
  margin: 0
  cursor: pointer
  /* 仅非激活态按钮触发通用hover效果 */
  &:not(.is-active):hover
    transition: .4s
    background: rgba(0, 0, 0, 0.075)
  &:first-child
    /* 仅非激活态的首按钮触发圆角hover */
    &:not(.is-active):hover
      border-top-left-radius: 2px
      border-bottom-left-radius: 2px
  &:last-child
    /* 仅非激活态的尾按钮触发圆角hover */
    &:not(.is-active):hover
      border-top-right-radius: 2px
      border-bottom-right-radius: 2px

.is-active
  background: white
  border-radius: 4px
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.16)
  border: none
  &:hover
    transition: .4s
    /* 这里可以自定义激活态的hover效果，当前和通用hover一致，可按需修改 */
    background: rgba(0, 0, 0, 0.075)

修改说明 #

• 核心是使用CSS的:not()伪类，给普通按钮的所有hover规则添加.is-active类的排除限制，确保只有未激活的按钮才会触发通用hover效果
• 激活态按钮的hover效果完全由.is-active:hover规则控制，不会和通用规则叠加，也不会被通用的圆角规则覆盖自带的4px圆角
• 你可以根据需求调整.is-active:hover内的样式，实现和未激活按钮不一样的hover效果

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