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.