CODEWITHSUNDEEP
cssvuetify.js
Mohamad Handy Nugraha
Mohamad Handy Nugraha

Reputation: 302

Cannot Hover on v-chip

I want to styling v-chip (my vuetify version 1.5.x), when hover v-chip I want that cursor to become pointer. HTML:

<div id="app">
  <v-app id="inspire">
    <v-container fluid class="pa-0">
      <v-layout row wrap>
        <v-flex md6 sm12>
          <div class="text-xs-center">
            <v-chip style="cursor: pointer;">Example Chip</v-chip>
          </div>
        </v-flex>
 
      </v-layout>
    </v-container>
  </v-app>
</div>

CSS:

v-chip:hover {
  cursor: pointer;
}
v-chip__content:hover {
  cursor: pointer;
}
v-chip__content {
  cursor: pointer;
}

JS:

new Vue({
  el: '#app',
  
})

The code somehow can't make v-chip when hover becomes a cursor pointer, what should I do? Code on codepen

Upvotes: 1

Views: 1923

Answers (2)

Mr. Perfectionist
Mr. Perfectionist

Reputation: 2746

You can do it like this:

.v-chip:hover *{
  cursor: pointer!important;
}

https://codepen.io/ilazycoder/pen/jOVMmaK

Upvotes: 1

Minal Chauhan
Minal Chauhan

Reputation: 6158

Your css is override by main css so used parent selected to work your css like this:

.container .v-chip .v-chip__content {
   cursor: pointer;
}

Upvotes: 3

Related Questions