我有以下 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; }