'vue.js mode for css

I have this BaseComponent used and configures in another component as followed:

<BaseTitle
      v-slot="{ highlightClass }"
      :color="mode === 'faq' ? 'dark' : 'secondary'"
      v-bind="__titleProps"
      :text-uppercase="mode === 'incentive'"
      highlight-type="colorize-uppercase-bold"
      :class="{ 'font-weight-normal': mode === 'faq' }"
    >

On this element I have a css-hover class


    .InfoTile {
      &:hover {
        .answer {
          background-color: $transparent-primary;
          opacity: 1;
        }
    
        .question {
          opacity: 0;
        }
      }

When I use the „incentive" mode I need to use another hover background-color. Is there a way to use another hover depending on the mode I use?

javascriptcssvuejs2vuejs3


Solution 1:[1]

So, is totally possible.

You just need to create 2 differentes css classes, between normal mode and incentive, that will have 2 differentes hover, etc.

you'll made a conditional term checking if mode === incentive.

But, the first thing you need to do is to set more than one classes in your component, you're using one already.

so, just do something like this.

:class="[{ 'font-weight-normal': mode === 'faq' }, mode === incentive ? 'cssClass1': 'cssClass2']"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kissu

Related Questions