मैं क्वासर में पाए गए लोगों के समान एक टॉगल बटन बनाने की कोशिश कर रहा हूं और होवर प्रभावों को ढेर करने में कठिन समय हो रहा है।

मेरे पास सभी बटनों पर एक होवर प्रभाव है (पहला और आखिरी बच्चा अपनी बाहरी सीमा को गोल करता है), लेकिन एक बटन सक्रिय होने पर एक अलग होवर रंग होता है (मुझे लगता है)। वर्तमान में वे दोनों एक दूसरे पर ढेर कर रहे हैं और मुझे यकीन नहीं है कि स्थिर सीएसएस होवर प्रभाव को कैसे हटाया जाए।

मैं मूल होवर प्रभाव को कैसे हटा सकता हूं और केवल is-active होवर प्रभाव प्राप्त कर सकता हूं?

चीयर्स!

यहाँ क्वासर बटनों का एक उदाहरण दिया गया है:

enter image description here

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>

कोडसैंडबॉक्स

0
LovelyAndy 22 नवम्बर 2021, 03:36

1 उत्तर

सबसे बढ़िया उत्तर

.not() छद्म वर्ग का प्रयोग करें।

तो आपके मामले में: .c-button.not(.is-active):hover {...}

1
Lee Wise 22 नवम्बर 2021, 04:13
1
बहुत खूब! त्वरित सहायता के लिए धन्यवाद!
 – 
LovelyAndy
22 नवम्बर 2021, 04:23