CODEWITHSUNDEEP
cssvue.jshovervuetify.jstablerow
mikeym
mikeym

Reputation: 6311

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

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.

Upvotes: 0

Views: 446

Answers (1)

yoduh
yoduh

Reputation: 14649

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

Upvotes: 1

Related Questions