Saya mempunyai html input tag berikut.
$("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">
Saya mahu mendapatkan acara tuding melalui JavaScript apabila pengguna menuding pada ibu jari sahaja.
Saya cuba melakukannya seperti di atas tetapi ia tidak memecat acara. Sebarang bantuan amatlah dihargai.
Terima kasih terlebih dahulu.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya sangat percaya bahawa anda tidak boleh melakukan ini menggunakan skop input html lalai, anda perlu menggunakan skop input tersuai seperti ini:
$("#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; }