JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente

Question

Ich habe die folgenden HTML-input-Tags.

$("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">

Ich möchte das Hover-Ereignis über JavaScript erhalten, wenn der Benutzer mit der Maus nur über den Daumen fährt.

Ich habe es wie oben versucht, aber es hat das Ereignis nicht ausgelöst. Jede Hilfe wäre sehr dankbar.

Vielen Dank im Voraus.

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