当鼠标在Vuetify.js组件中的选项卡上悬停时，如何更改背景色高度？
当鼠标在Vuetify.js组件中的选项卡上悬停时，如何更改背景色高度？
提问于 2020-08-26 08:12:54
我必须改变背景颜色高度时，鼠标悬停选项卡菜单。这是我的客户订单，我试着做下面的代码。它看起来很成功，但是在标签上有一点点的连线运动。
我使用v选项卡:悬停控制选项卡的高度。当鼠标在选项卡上悬停时，选项卡的标题移动到向上。我想修复标签的标题和只是背景颜色调整。有人能给我个建议吗？
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
Stack Overflow用户
回答已采纳
发布于 2020-08-26 08:58:18
除非有其他CSS覆盖您的代码应该工作的高度，因为v选项卡是<v-tab>的一个类。参见代码框：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-选项卡，没有悬停，以避免移动在悬停。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63593362
复制相关文章
相似问题
腾讯云开发者
