Vuetify.js：使用v-hover组件在鼠标悬停事件上设置CSS类

Question

我试图根据是否有鼠标悬停来更改类以应用于Vuetify.js组件：

<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>

CSS类仅设置background-color属性：

.class1 {
  background-color:red;
}

.class2 {
  background-color:blue;
}

由于某种原因，这是行不通的。我想念什么？

Codepen。

Answer 1

你错过了引号中的道具class结合和花括号中的slot-scope道具。

应该这样定义：

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

工作码笔

Vuetify悬停文档