[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>

    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-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?

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

    .my-item:nth-child(even) {
    .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.

  • I ended up doing this (sass in vue single file):

          > .q-focus-helper
            background-color: $secondary

  • @dpamio I don’t see any Sass file in the project but styl files for styling. The could you posted could possibly be fore quasar 0.17.

    I got this to work by inspecting the element and playing with the css:
    First, add a background-color and opacity as 1 to q-focus-helper. Then remove the opacity and background-color from the q-focus-helper ‘before’ and ‘after’ css.
    Now you will have an opaque background colour when hovered but it will cover the text.
    So add z-index 1 to q-item__label.

    This is a pretty crapy solution!