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?
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']"