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.

Answer 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;
}