vuetify卡的悬浮效果（nuxt）

Question

我有这样的证件卡：

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