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.
我堅(jiān)信你不能使用默認(rèn)的 html 輸入范圍來(lái)做到這一點(diǎn),你必須使用自定義的輸入范圍,如下所示:
$("#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; }