供应商特定伪元素上的 JavaScript 悬停事件

Question

我有以下 html input 标签。

$("input[type='range']::-webkit-slider-thumb").on('hover', function () {
    //...
});

input[type="range"] {
    height: 0.5rem;
    box-shadow: 0 0 0.25rem gray;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 100%;
    background: #7CB5EC;
    box-shadow: 0 0 0.375rem gray;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 100%;
    background: #7CB5EC;
    box-shadow: 0 0 0.375rem gray;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<input id="my-range" type="range" min="0" max="100">

每当用户仅将鼠标悬停在拇指上时，我希望通过 JavaScript 获取悬停事件。

我尝试像上面那样做，但它没有触发事件。如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

我坚信你不能使用默认的 html 输入范围来做到这一点，你必须使用自定义的输入范围，如下所示：

 $("#slider").slider({
  range: "min",
  min: 0,
  max: 100,
  change: function( event, ui ) {
      console.log(ui.value);
  }
});

$(".ui-slider-handle").on("mouseover", function() {
  console.log("Hover on thumb!");
})

#slider{
  width: 200px;
  margin-left: 20px;
  border-radius: 100px;
  height: 10px;
  background: #efefef;
}

.ui-slider-handle {
  background: #0976f7 !important;
  border-radius: 100px !important;
}

.ui-widget-header{
  background: #0976f7 !important;
}

sssccc
sssccc