эффект наведения с помощью карт vuetify (nuxt) - PullRequest
0 голосов
/ 03 октября 2018

У меня есть карта 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);
   }
}

, но я хотел бы иметь этот эффект при наведении курсора повсюду на карте.

1 Ответ

0 голосов
/ 03 октября 2018

Для решения вашей проблемы вы можете использовать следующее решение:

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