在Vuetify 3中更改悬停颜色

qxgroojn 于 2023-05-01 发布在 Vue.js

关注(0)|答案(1)|浏览(258)

在我的AppBar里我的Vuetify 3项目的vue组件，汉堡图标和菜单项有一个非常黑暗的悬停效果。
在文档中，默认的悬停是浅灰色而不是全黑色，有谁知道为什么会发生这种情况，我如何才能改变它，请？
我已经尝试了几个CSS选择器和伪选择器，包括添加！重要，并将v-hover中的元素包裹设置为禁用。..

<template>
  <v-app>
    <v-app-bar :elevation="2">
      <!-- eslint-disable-next-line vue/valid-v-on -->

      <v-app-bar-nav-icon @click="drawer = !drawer"> </v-app-bar-nav-icon>
      <v-app-bar-title>The Candidate Consultants</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item
          class="custom-hover"
          v-for="item in menuItems"
          :key="item.title"
          @click=""
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

我尝试的CSS选择器之一：

@import "@/styles/_variables.scss";
.custom-hover:hover {
  background-color: $blue !important;
}

vue.js

来源：https://stackoverflow.com/questions/76088401/change-hover-colour-in-vuetify-3

1条答案

按热度按时间

lvmkulzt1#

我认为这种情况发生在没有主题的时候，不知道为什么会发生在你的例子中。
悬停变化设置在具有*__overlay类的元素上，并且由其不透明度定义，该不透明度通过变量--v-hover-opacity和--v-theme-overlay-multiplier，i设置。即：

v-list-item:hover > .v-list-item__overlay {
  opacity: calc(var(--v-hover-opacity)*var(--v-theme-overlay-multiplier));
}

变量应按主题提供：

.v-theme--light{
  --v-hover-opacity: 0.04;
  --v-theme-overlay-multiplier: 1;
}

你可以自己（重新）设置它们，但我宁愿弄清楚你的主题有什么问题。你知道是什么吗？
请注意，如果我把你的代码放进一个代码片段中，它会像预期的那样工作：

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    return {
      drawer: ref(true),
      menuItems: ref([{title: 'item 1'}, {title: 'item 2'}])
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-app-bar :elevation="2">
      <v-app-bar-nav-icon @click="drawer = !drawer"> </v-app-bar-nav-icon>
      <v-app-bar-title>The Candidate Consultants</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item
          class="custom-hover"
          v-for="item in menuItems"
          :key="item.title"
          @click=""
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
  
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

赞(0）回复(0）举报 2023-05-01

我来回答

在Vuetify 3中更改悬停颜色

1条答案

相关问题

热门标签

最新问答