如何消除静态类的悬停效果？

Question

我正在尝试构建一个类似于 quasar 中的切换按钮，并且在堆叠悬停效果方面遇到了困难。

我对所有按钮都有悬停效果（第一个和最后一个子项的外边框变圆），但是当按钮处于活动状态时（我认为）会有不同的悬停颜色。目前它们都相互堆叠，我不确定如何删除静态 css 悬停效果。

我怎样才能去掉原来的悬停效果而只保留is-active 悬停效果？

干杯！

这是一个类星体按钮的示例：

ButtonToggle.vue

<template>
  <div class="c-button-toggle-wrapper">
    <button
      :class="[option.value === selectedOption ? 'is-active' : '', 'c-button']"
      v-for="option in options"
      :key="option"
      :modelValue="modelValue"
      :option="options"
      @click="selected(option.value)"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<style lang="sass" scoped>
.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
    transition: .4s
    background: rgba(0, 0, 0, 0.075)
  &:first-child
    &:hover
      border-top-left-radius: 2px
      border-bottom-left-radius: 2px
  &:last-child
    &: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
    background: rgba(0, 0, 0, 0.075)
</style>

<script>
export default {
  name: "ButtonToggle",
  props: {
    modelValue: { type: undefined, required: true },
    options: { type: Array, required: true },
  },
  data() {
    return {
      selectedOption: null,
    };
  },
  computed: {},
  methods: {
    selected(option) {
      this.selectedOption = option;
      console.log(`selectedOption`, this.selectedOption);
      this.$emit("update:modelValue", this.selectedOption);
    },
  },
};
</script>

CodeSandbox

Answer 1

使用.not() 伪类。

所以在你的情况下： .c-button.not(.is-active):hover {...}