recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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.

P粉576184933P粉576184933255 Il y a quelques jours464

répondre à tous(1)je répondrai

  • P粉924915787

    P粉9249157872024-04-07 10:33:29

    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
    
    

    répondre
    0
  • Annulerrépondre