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