javascript - Vuetify slider: Change mouse cursor to pointer on hover and click - Stack Overflow

admin管理员组

文章数量:1245838

Is there a way in vuetify to change the mouse cursor, when hovering over or clicking on the blue circular button element of the slider (v-slider)?

This is what it looks / behaves right now:

This is the way I want it to look / behave like:

I tried inline style, but it doesn't work: style="cursor: pointer"

Is there a way in vuetify to change the mouse cursor, when hovering over or clicking on the blue circular button element of the slider (v-slider)?

This is what it looks / behaves right now:

This is the way I want it to look / behave like:

I tried inline style, but it doesn't work: style="cursor: pointer"

• javascript
• html
• css
• vuetify.js
• mouse-cursor

Share Improve this question Follow edited Dec 30, 2021 at 14:06 General Grievance 5,0233838 gold badges3737 silver badges5656 bronze badges asked Mar 24, 2019 at 10:08 sunwarr10rsunwarr10r 4,79799 gold badges6363 silver badges118118 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

There is no props available to change cursor. Possible way to change cursor to add css to .v-slider__thumb class

.v-slider__thumb{
  cursor:grabbing;
  height:42px;
  width:42px;
}

Codepen : https://codepen.io/anon/pen/XGOqWm

First add a class to the then style as CSS. Exapmle below

<v-list>
   <v-list-item
       v-for="(item, index) in items"
          :key="index"
         >
           <v-list-item-title
             class="row-pointer"
         >{{ item.title }}</v-list-item-title>
    </v-list-item>
 </v-list>

<style scoped>
.row-pointer {
  cursor: pointer;
}
</style>

Here's the way I did it. This method enables the cursor to change from grab to grabbing when the user is clicking-and-holding the draggable part of the slider.

<style scoped lang="scss">
  .my-slider-class >>> .v-slider {
    cursor: pointer;
    &:active {
      cursor: grabbing;
    }
    .v-slider__thumb {
      cursor: grab;
      &:active {
        cursor: grabbing;
      }
    }
  }
</style>

本文标签： javascriptVuetify slider Change mouse cursor to pointer on hover and clickStack Overflow