Vuetify 3中自定义v-btn组件鼠标悬停效果问题

针对你遇到的v-btn（text变体）悬停背景始终有透明度的问题，核心原因是Vuetify 3中文本按钮的悬停效果由::before伪元素控制，而非按钮本身的background-color属性。以下是具体解决方法：

方案1：完全移除悬停背景效果 #

直接将伪元素的背景设为透明并取消透明度：

<template>
  <v-card class="mx-auto" color="grey-lighten-3" max-width="448">
    <v-layout>
      <v-app-bar color="white" class="h-20 flex justify-center">
        <v-btn 
          class="no-hover font-googlePoppins font-bold leading-loose text-zinc-800"
          variant="text"
          :ripple="false"
        >Home</v-btn>
      </v-app-bar>
    </v-layout>
  </v-card>
</template>

<script setup>
import { VAppBar, VBtn, VCard, VLayout } from 'vuetify/lib/components/index.mjs';
</script>

<style scoped>
.no-hover::before {
  background-color: transparent !important;
  opacity: 0 !important;
}

/* 可选：取消过渡动画 */
.no-hover {
  transition: none !important;
}
</style>

方案2：自定义白色悬停背景 #

需要精准定位伪元素的hover状态，确保样式优先级覆盖Vuetify默认值：

<template>
  <!-- 模板部分不变 -->
</template>

<script setup>
<!-- 脚本部分不变 -->
</script>

<style scoped>
.no-hover:hover::before {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.no-hover {
  transition: none !important;
}
</style>

关键说明 #

• Vuetify 3的variant="text"按钮，悬停背景是通过v-btn::before伪元素实现的，默认会应用低透明度的主题色背景，直接修改按钮的hover样式不会生效。
• 如果使用scoped样式遇到优先级问题，可以尝试添加:deep()深度选择器（针对组件内部样式穿透）：

  :deep(.no-hover:hover::before) {
    background-color: #ffffff;
    opacity: 1;
  }
  

内容的提问来源于stack exchange，提问作者DistastefulFrog