vuetify 卡的悬停效果（nuxt）

Question

我有一张这样的 vuetify 卡：

    <v-card class="news__card">
      <v-card-media
        :src="ip.images[0].url"
        height="150px"
        @click="onLoadNews(ip.id)"
      />
      <v-card-title primary-title @click="onLoadNews(ip.id)">
        <div class="news__card__down">
          <h3 class="subheading font-weight-medium">{{ ip.headline }}</h3>
          <div class="published">{{ ip.date }}</span> </div>
        </div>
      </v-card-title>
    </v-card> 

而且我想在卡片上悬停时产生一种效果，该卡片在背景图像上应用了变换。当我将鼠标悬停在 .v-card__media__background 上时它会起作用：

.v-card__media__background:hover {
  position: relative;
  animation: scaleMe 500ms ease-in-out 0s forwards;
}

@keyframes scaleMe {
   100% {
    transform: scale(1.2);
   }
}

但我想在卡片中的任何地方悬停时都有这种效果。

Answer 1

您可以使用以下解决方案来解决您的问题：

.news__card:hover .v-card__media__background {
    // your animation...
}