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

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

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.

CodePudding user response：

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

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