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

[sakhan]

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.

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.

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.

[RolandCsibrei]

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

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

[metalsadman]

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.

[dpamio]

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

  body.desktop
    .q-hoverable:hover
      > .q-focus-helper
        background-color: $secondary

[sakhan]

@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!