Question

在输入范围滑块中，当鼠标悬停在拇指上时，我要增加可操作区域的大小将增加。我已经尝试过了

HTML

<input id="param1" type="range" min="0" max="1" step="0.1" class="slider-color">

jQuery

$('.slider-color::-webkit-slider-thumb').hover(function(){
    $('.slider-color::-webkit-slider-runnable-track').css('height','11px');
});

请帮助。上面不起作用

Answer 1

我不确定是否可以在slider-thumb上悬停，但是如果您希望将悬停在所有可以依靠CSS变量更改某些属性的滑块上，则可以采用这种方法

.slider-color:hover {
  --c:red;
  --h:40px;
}
.slider-color::-webkit-slider-runnable-track {
  background:var(--c,transparent);
  height:var(--h,initial);
}

<input id="param1" type="range" min="0" max="1" step="0.1" class="slider-color">

输入范围滑块Thumb js事件

1 个答案: