Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur

Question

J'ai les balises html input suivantes.

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

Je souhaite obtenir l'événement de survol via JavaScript chaque fois que l'utilisateur survole uniquement le thumb.

J'ai essayé de le faire comme ci-dessus mais cela n'a pas déclenché l'événement. Toute aide serait grandement appréciée.

Merci d'avance.

Answer 1

Je crois fermement que vous ne pouvez pas faire cela en utilisant la portée de saisie HTML par défaut, vous devez utiliser une portée de saisie personnalisée comme celle-ci :

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