Vuetify 滑块：将鼠标光标更改为悬停指针并单击

Question

vuetify 中有没有办法在将鼠标悬停在或单击滑块 (v-slider) 的蓝色圆形按钮元素时更改鼠标光标？

这是它现在的外观/行为：

这是我希望它的外观/行为方式：

我尝试了内联样式，但它不起作用：style="cursor: pointer"

Answer 1

没有可用于更改光标的道具。更改光标以将 css 添加到 .v-slider__thumb class

的可能方法

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

密码本：https://codepen.io/anon/pen/XGOqWm

Answer 2

首先在 then 样式中添加一个 class 作为 CSS。下面的例子

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

Answer 3

我是这样做的。当用户单击并按住滑块的可拖动部分时，此方法使光标从 grab 变为 grabbing。

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

Vuetify 滑块：将鼠标光标更改为悬停指针并单击

Vuetify slider: Change mouse cursor to pointer on hover and click

javascript

html

css

vuetify.js

mouse-cursor