[v1]How to change hover color for q-item



  • I have a left drawer with simple q-item. When I hover over the item, the background of the item stripe and text color changes. I want to change the default background color.

    Inspecting the elements reveal this:

    <a href="#/" class="q-item q-item-type row no-wrap q-router-link--exact-active q-router-link--active q-item--clickable q-link cursor-pointer q-focusable q-hoverable" tabindex="0">
      <div tabindex="-1" class="q-focus-helper"></div>
      <div class="q-item__section column q-item__section--avatar q-item__section--side justify-center">
        <i aria-hidden="true" class="material-icons q-icon">home</i></div>
        <div class="q-item__section column q-item__section--main justify-center"><div class="q-item__label">Home</div>
      </div>
    </a>
    

    The background color is defined in the “q-focus-helper” class. If I override the class with a background color say red.

    .q-list .q-focusable:focus > .q-focus-helper, 
    .q-list .q-manual-focusable--focused > .q-focus-helper, 
    .q-list .q-hoverable:hover > .q-focus-helper 
    {
    	  background: red;
    }
    

    When hovered over the item does change color to red, but it is a bit transparent.

    alt text

    if I add opacity: 1 to the css above. The hover stripe is a bit more red, but still not complete red and the text disappears.

    alt text

    In the previous quasar version 0.17 all I had to do was:

    .q-list-highlight > .q-item:hover, 
    .q-item-highlight:hover, 
    .q-list-link > .q-item:hover, 
    .q-item-link:hover {
          background: red 
    }
    

    Has anyone been able to change the background color when hovered over a list item?
    Thanks.



  • <q-item class=“my-item” …
    </q-item>

    style:
    .my-item:nth-child(even) {
    background-color:#f8f8f8;
    }
    .my-item:hover {
    background-color: red;
    }



  • my suggestion is to open a browser and inspect the element and make your changes in the css there to see which one looks best for you and then make your overrides.