Vuetify.js: set CSS class on mouse hover event using v-hover component

Question

I am trying to change the class to apply on a Vuetify.js component based on whether there is a mouse hover or not:

<v-card
    class="mx-auto"
    width="344"
  >
    <v-hover>
    <v-card-title
      slot-scope="hover"
      :class="`${hover? class1: class2}`">
      <div>
        <span class="headline">Hover</span>              
        </div>
      </div>

    </v-card-title>
    </v-hover>
  </v-card>

The CSS classes simply set the background-color property:

.class1 {
  background-color:red;
}

.class2 {
  background-color:blue;
}

For some reason, this is not working. What am I missing?

Codepen.

I was trying to provide an MCVE , but you are right, thank you :) — Billal BEGUERADJ
– Billal BEGUERADJ, Commented Nov 9, 2018 at 10:53

Toodoo · Accepted Answer · 2018-11-09 10:47:46Z

7

You miss quotes in your prop class binding and curly braces in your slot-scope prop.

It should be defined like this :

slot-scope="{ hover }"
:class="`${hover? 'class1': 'class2'}`">

Working CodePen

Vuetify Hover Doc

answered Nov 9, 2018 at 10:47

Toodoo

8,8106 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuetify.js: set CSS class on mouse hover event using v-hover component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related