Vuetify: how to disable the color transition for v-icon

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

cssvue.jsvuejs2css-transitionsvuetify.js

Answer №1

After adding the code snippet transition: none to the icon element, the desired effect was achieved:

.v-list-item .v-icon {
  transition: none !important;
}

Here is a demonstration of the solution:

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;
}
  
.v-list-item .v-icon {
  transition: none !important;
}
<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="e1878e8f95a1d5cf99">[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="fa8c8f9f8e939c83bac8d482">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">

  <div id="app">
    <v-app>
      <v-main>

        <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-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddaba8b89deff3a5">[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="88fefdedfce1eef1c8baa6f0">[email protected]</a>/dist/vuetify.js">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I show the last li item in a ul element that extends beyond its parent container?

Chat App Development In my current project, I am developing a chat application using React. The app consists of a list (ul element) that displays messages through individual items (li elements). However, I have encountered an issue where the ul element st ...

javascripthtmlcssreactjs

Is it possible that the Divi blurb module fails to extend to the full height of the row?

I frequently use Divi blurb modules, as seen here: - positioned at the top of the page, just below the header. However, I am facing an issue with getting them to be consistent in height. The 'database generation' module appears shorter than the ...

htmlcsswordpressdivi

The Vue.createApp function seems to be malfunctioning, whereas using the new Vue() method is functioning correctly

When running my code, I encountered the following error message: tesyya.js:16 Uncaught TypeError: Vue.createApp is not a function. My code snippet looks like this: const app = Vue.createApp({ data() { return { count: 4 } } }) const vm ...

javascriptvue.jsvuejs2vue-componentvuejs3

Personalize Drop-Down Selection

Currently implementing bootstrap on a site and seeking to enhance the dropdown menu customization. The default navbar appearance is present, with dropdown elements appearing upon hover. My goal is to include an icon next to each item in the navbar and ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to assign dynamic widths to inner divs within a parent div automatically

I am working with divs <div id='top' > <div id='top-border' > </div> <div id='top-menu' > <jdoc:include type="modules" name="top-menu" style="well" /></div> </div> and adjust ...

htmlcss

Like button for Facebook located at the bottom of a static webpage

I am facing an issue with my web application where it does not scroll properly, especially when there is a Facebook button at the bottom. The behavior in Chrome and Firefox is inconsistent and causing some trouble. In Chrome, the div repositions correctly ...

javascriptcssfacebook-like

Displaying the user's username upon logging into a website is a simple yet effective

I have successfully developed a simple web page using PHP and HTML. However, I am facing an issue in displaying the username after login. Additionally, I would like to hide the login and signup sections after successful login. Can anyone provide assistance ...

phphtmlcss

Adjust the appearance of input fields that exclusively have the value "1"

When designing my website, I encountered a problem with the style I chose where the number "1" looks like a large "I" or a small "L." I am wondering if there is a way to use JavaScript to dynamically change the font style for input fields that only contai ...

javascriptjquerycss

The relationship between formatting context and atomic inline-level boxes is crucial for understanding

Check out this link for more information on inline boxes An inline box is a unique element that falls under the category of both inline-level and participates in its containing inline formatting context. When a non-replaced element has a 'display&ap ...

htmlcssflexboxw3c

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

javascripthtmljquerycssonclick

What are the steps to resize a YouTube embedded video?

I am currently attempting to use a YouTube video as the background for breadcrumbs on my website. However, I am facing an issue with setting the video width to cover the full screen. The image below shows that the video is displayed in the center of the if ...

htmlcssvideoiframeembed

What is the best way to showcase two SVG clocks on a single webpage?

The issue arises when combining the desktop and mobile versions of the clock script. The first clock works fine on its own, but upon duplicating another set of scripts for the second clock, it encounters display problems. I have appropriately labeled the c ...

javascripthtmlcsssvg

ChakraUI ForwardRef in React not applying variant to child component

Encountering an issue with the combination of forwardRef and Input from ChakraUI. Attempting to create a generic input component with a flushed variant, but facing difficulty as Chakra keeps resetting it back to default. ModalInput Component import { for ...

cssreactjsreact-propschakra-ui

Unable to position a div alongside a fluid div with minimum and maximum widths

Within this container, there is a div. #leftBanner { height: 100%; background-color: #CCC; width: 22%; min-width: 245px; max-width: 355px; float: left; } This particular div doesn't cooperate when I try to float another div next to it. While I could ...

htmlcss

Buttons are not aligned with the rest of the row's height

I'm currently working on designing an upload layout that consists of a container with a row inside. Within the row, there are two buttons (each containing input elements) and one h3. For some reason, I am having difficulty getting them to align at the ...

htmlcss

Passing events from Vue to child components

Looking for a way to make clicking on the outer pill element have the same effect as clicking on the checkbox itself? Check out this HTML code that renders these little boxes: <div class="token-checkboxes"> <span class="checkbox-span" v-for=" ...

javascriptvue.js

What is the best way to make my text scroll horizontally if the container is not wide enough?

Instead of overwhelming you with code, I'll just share a link to the types of animations I've come across so far. Although these options are close to what I'm looking for, none of them are exactly right. The one that comes closest to my vis ...

htmlcssmarquee

No visible changes from the CSS code

As I create a small HTML game for school, I'm facing an issue with styling using CSS. Despite my efforts to code while using a screen reader due to being blind, the styling of an element isn't being read out as expected. The content seems to be c ...

javascripthtmlcssng-animatescreen-readers

Include a CSS file from an external JavaScript file

Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...

javascriptcssexternal

Vuetify 3 Spacing System

I need assistance in creating a v-row without gutters (with a red background) in Vuetify 3. I want it to span the entire width of the screen without any spaces in between. Can anyone provide guidance on this? <template> <v-container fluid> ...

vue.jsgridvuetify.jsvuetifyjs3