My menu includes both icon and text items, with hover color styled using the following CSS:
.v-list-item:hover {
background: #0091DA;
}
.v-list-item:hover .v-list-item__title, .v-list-item:hover .v-icon {
color: white;
}
The problem is that the text color changes instantly on hover, while the icon color transitions, creating an odd effect.
Question: Is it possible to remove the transition on color change for v-icon?
Please see the example code below for reference:
new Vue({
el: '#app',
vuetify: new Vuetify(),
});
Vue.config.productionTip = false
Vue.config.devtools = false.v-list-item:hover {
background: #0091DA;
}
.v-list-item:hover .v-list-item__title, .v-list-item:hover .v-icon {
color: white;
}<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0969f9e84b0c4de88">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b0d0e1e0f121d023b495503">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-list dense>
<v-list-item>
<v-list-item-icon class="mr-0">
<v-icon small>mdi-message-text</v-icon>
</v-list-item-icon>
<v-list-item-title>Menu item 1</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon class="mr-0">
<v-icon small>mdi-dialpad</v-icon>
</v-list-item-icon>
<v-list-item-title>Menu item 2</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon class="mr-0">
<v-icon small>mdi-call-split</v-icon>
</v-list-item-icon>
<v-list-item-title>Menu item 3</v-list-item-title>
</v-list-item>
</v-list>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4c4f5f7a081442">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f797a6a7b6669764f3d2177">[email protected]</a>/dist/vuetify.js"></script