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.

Answer 1

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