Conditional css on hover based on class of row of Vuetify simple table

Question

I have a Vuetify v-simple-table where I need to render row css differently depending on whether a task is complete or not.

I can conditionally render the background color with the following code.

<tr :class="[done? 'greenBG' : 'whiteBG']">

The css is straight forward.

  .greenBG {
    background-color: #79ecc5;
  }
  .whiteBG {
    background-color: white;
  }

However, I cannot seem to disable the defualt :hover css. I tried connecting it to the class with this css.

  tr.greenBG:hover { background-color: green }

If anyone can help me achieve this I'd be grateful.

Check your use of tr.greenBG:hover { background-color: green } sometimes browsers like to have that semi-colon tr.greenBG:hover { background-color: green; } OR just add to the specificity of the selector .v-data-table__wrapper tr.greenBG:hover { background-color: green; } — Mark Schultheiss
– Mark Schultheiss, Commented Nov 7, 2022 at 22:17

yoduh · Accepted Answer · 2022-11-07 22:25:05Z

1

Try with the !important property to ensure you override any conflicting vuetify CSS

tr.greenBG:hover { 
  background-color: green !important
}

if you really want to avoid using !important you need to be as specific as vuetify's CSS selector:

.v-data-table__wrapper
  table
  tbody
  tr.greenBG:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
  background: green;
}

edited Nov 7, 2022 at 22:25

answered Nov 7, 2022 at 17:56

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kissu Over a year ago

Be sure to double-check that it's mandatory tho (using your browser's devtools), the usage of !important may be overkill.

mikeym Over a year ago

Thanks. Worked a charm. I'd forgotten about !important.

Mark Schultheiss Over a year ago

Most times when you add !important to CSS that means something else is wrong (unless you are writing a reusable library) like too much CSS or the cascade is misunderstood etc.

yoduh Over a year ago

Vuetify CSS itself sometimes uses !important so sometimes it's a necessary evil. I looked deeper and in this instance it can be avoided so the answer has been modified to include an alternative.

Collectives™ on Stack Overflow

Conditional css on hover based on class of row of Vuetify simple table

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related