Vuetify: Change background color after click on v-card-CodePudding

here is my jsbin link, https://jsbin.com/puhozirunu/edit?html,js,output

here is the v-card component of Vuetify I am using,

<v-card @click="myClick()">
   <v-card-title>hello</v-card-title>
   <v-card-text>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis officiis similique non quod quaerat est vitae expedita, iusto id sunt sint, officia neque et cumque, culpa quis inventore veritatis quam.
   </v-card-text>
</v-card>

I have used @click event to bring the ripple effect on click. After I click on the card background become grey, but I want to turn the background to be blue. I have used .v-card--link:before class to change the background color, but it's not working.

.v-card--link:before{
  background: blue !important;
}

CodePudding user response：

Try targetting the :focus selector

.v-card--link:focus {
  background: blue;
}

.v-card--link:focus::before {
  opacity: 0;
}