How to change icon on hover effect?

user_18772473 0
Viewed 303

As an user, I want to see tasks checkbox as gray tick on hover and blue tick when checkbox is checked.

    <div id="app">
  <v-app id="inspire">
    <v-container
      class="px-0"
      fluid
    >
      <v-checkbox
        :off-icon="'mdi-circle-outline'"
        :on-icon="'mdi-check-circle'"
        v-model="checkbox"
        :label="`Checkbox 1: ${checkbox.toString()}`"
      ></v-checkbox>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      checkbox: true,
    }
  },
})

https://codepen.io/edlung/pen/WNdmKBL?editors=101

nuxt.js vuetify.js vue.js css
1 Answers

As already mentioned in comments, you can use v-hover component to achieve it:

<v-hover
  v-slot="{ hover }"
>
  <v-checkbox
    :off-icon="'mdi-circle-outline'"
    :on-icon="'mdi-check-circle'"
    v-model="checkbox"
    :label="`Checkbox 1: ${checkbox.toString()}`"
    :color="hover ? 'gray': 'primary'"
  />
</v-hover>
...
data () {
  return {
    checkbox: true,
  }
}

CodePen demo is here

user_92752240
Related