I'm new to Vuetify and would like to make something like this. Basically I have a navigation drawer as a side bar and I want to be able to change the background-color of one of the list on hover as well when selected. Vuetify documentation doesn't seem to discuss this. And I've been looking everywhere, any help will be appreciated.
You can assign the "v-list-tile", which is the bit you want to style, a class and include your css in that. So your v-navigation-drawer html will look like this:
<v-navigation-drawer
dark
permanent
>
<v-list>
<v-list-tile
class="tile"
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action> //etc....
As you can see I have added the class="tile" to the "v-list-tile".
Now just add a .tile class to your pages css:
<style scoped>
.tile {
margin: 5px;
border-radius: 4px;
}
.tile:hover {
background: green;
}
.tile:active {
background: yellow;
}
</style>
and that should do the job.