Change hover colour in Vuetify 3

[angusgee]

In my Vuetify 3 project, I have this hamburger icon in my AppBar.vue component:

<v-app-bar-nav-icon @click="drawer = !drawer"> </v-app-bar-nav-icon>

Unfortunately, on hover it goes black. The same colour is applied to the navigation drawer items on hover. According to the docs, they should have a light grey on hover not jet black. Does anyone know why?

Also, how can I change the hover colour? I've tried every CSS selector and psuedo selector imaginable, custom classes, I've tried wrapping the elements in v-hover set to disabled, but I can't get rid of the black hover effect?

[angusgee]

Update: if I target the v-app-bar-nav-icon and v-list-item elements with an id then the hover style is applied, but it appears "under" the black hover effect. The element goes jet black on hover initally, then as I move the mouse away the colour is shown "behind" it.

#hamburger-icon:hover { background-color: aqua; }

<v-app-bar-nav-icon @click="drawer = !drawer" id="hamburger-icon">

see screenshot for ugly black hover effect:

https://gyazo.com/4ed41ac70c9fddb97666ba3224807b5d

[1amGr00t]

Hi I have the same issue here. How did you solve it ?