Как изменить высоту цвета фона при наведении курсора мыши на вкладку в Vuetify.js компоненты?

#javascript #html #css #vuetify.js

#javascript #HTML #css #vuetify.js

Вопрос:

Я должен изменить высоту цвета фона при наведении курсора мыши на меню вкладок. Это мой заказ клиента, я попытался создать код ниже. Это кажется успешным, но немного связано с движением на вкладке.

Я использовал v-tab: hover для управления высотой вкладки. При наведении курсора мыши на вкладку заголовок вкладки перемещается вверх. Я хочу исправить заголовок вкладки и просто настроить цвет фона. Может кто-нибудь посоветовать мне, пожалуйста?

[Html]

 <div id="app">
  <v-app id="inspire">
    <v-tabs>
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
  </v-app>
</div>

[CSS]

 .v-tab:hover {
  height: 40px;
}

[Javascript]

  new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

1. .v-tab подразумевает что-то с классом v-tab … думаю, вы могли бы указать свой <v-tab> этот класс … например <v-tab class="v-tab">....</v-tab>

2. Спасибо за ваши комментарии! Я попробовал ваш совет, но он не сработал.

Ответ №1:

Если нет какого-либо другого CSS, перезаписывающего высоту, ваш код должен работать, поскольку v-tab является классом <v-tab> . Смотрите codesandbox:https://codesandbox.io/s/stupefied-pike-kp3ru?file=/src/components/HelloWorld.vue

или код ниже:

 <template>
  <div>
    <v-tabs>
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<style scoped>
.v-tab, .v-tab:hover {
  height: 40px;
}
</style>

Редактировать: Добавлен тот же CSS в .v-tab без наведения курсора, чтобы избежать перемещения при наведении курсора.

Ответ №2:

<v-hover> компонент — правильный способ сделать это.

 <template>
  <div>
    <v-tabs>
      <v-hover v-slot="{ hover }">
        <v-tab :class="{ 'on-hover': hover }">Item One</v-tab>
      </v-hover>
      <v-hover v-slot="{ hover }">
        <v-tab :class="{ 'on-hover': hover }">Item Two</v-tab>
      </v-hover>
      <v-hover v-slot="{ hover }">
        <v-tab :class="{ 'on-hover': hover }">Item Three</v-tab>
      </v-hover>
    </v-tabs>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<style scoped>
.v-tab.on-hover {
  /* hover styles here */
}
</style>