我有以下 html input 標籤。
$("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">
每當使用者僅將滑鼠懸停在拇指上時，我希望透過 JavaScript 取得懸停事件。
我嘗試像上面那樣做，但它沒有觸發事件。如有任何幫助，我們將不勝感激。
提前致謝。
我堅信你不能使用預設的 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; }