如何为input range的伪元素滑块thumb绑定hover事件？

问题根源 #

你尝试通过$("input[type='range']::-webkit-slider-thumb")绑定hover事件失败，核心原因是：CSS伪元素（如::-webkit-slider-thumb）并非真实的DOM节点，JavaScript（包括jQuery）无法直接选择或为其绑定事件。

解决方案：通过范围元素的鼠标事件判断hover状态 #

我们可以监听range元素的mouseover、mousemove和mouseleave事件，通过计算鼠标位置与thumb的相对位置，判断是否hover在thumb上。

完整代码示例

HTML

<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">

CSS（修正原代码中的转义引号问题）

input[type="range"] {
    height: 0.5rem;
    box-shadow: 0 0 0.25rem gray;
    width: 200px;
    padding: 0;
}

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;
    transition: background 0.2s;
}

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;
    transition: background 0.2s;
}

JavaScript

$(function() {
    const $range = $('#my-range');
    let isHoveringThumb = false;
    // 对应CSS中thumb的宽高（1.25rem = 20px，根据自己的CSS调整）
    const thumbSize = 20;

    // 监听鼠标移动/进入事件
    $range.on('mouseover mousemove', function(e) {
        const rangeDom = this;
        const rect = rangeDom.getBoundingClientRect();
        const rangeWidth = rect.width;
        const min = Number(rangeDom.min) || 0;
        const max = Number(rangeDom.max) || 100;
        const currentValue = Number(rangeDom.value);

        // 计算thumb在range内的水平偏移量
        const thumbOffsetLeft = ((currentValue - min) / (max - min)) * (rangeWidth - thumbSize);
        // 计算鼠标在range元素内的坐标
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;
        // range元素的垂直中心位置
        const rangeCenterY = rect.height / 2;

        // 判断鼠标是否在thumb范围内（圆形thumb，所以判断X范围+Y到中心的距离）
        const isInThumbArea = mouseX >= thumbOffsetLeft && mouseX <= thumbOffsetLeft + thumbSize &&
                              Math.abs(mouseY - rangeCenterY) <= thumbSize / 2;

        if (isInThumbArea && !isHoveringThumb) {
            // 进入thumb hover状态
            isHoveringThumb = true;
            console.log('鼠标悬停在滑块thumb上');
            // 示例：改变thumb背景色
            $range.css('--thumb-bg', '#5a9edb');
        } else if (!isInThumbArea && isHoveringThumb) {
            // 离开thumb hover状态
            isHoveringThumb = false;
            console.log('鼠标离开滑块thumb');
            $range.css('--thumb-bg', '#7CB5EC');
        }
    }).on('mouseleave', function() {
        // 鼠标离开整个range元素时重置状态
        isHoveringThumb = false;
        $range.css('--thumb-bg', '#7CB5EC');
    });
});

补充优化

如果需要用CSS配合样式变化，可以在CSS中添加变量引用：

input[type="range"]::-webkit-slider-thumb {
    background: var(--thumb-bg, #7CB5EC);
}
input[type="range"]::-moz-range-thumb {
    background: var(--thumb-bg, #7CB5EC);
}

跨浏览器兼容说明 #

该逻辑同时支持Chrome、Edge等webkit内核浏览器，以及Firefox等使用::-moz-range-thumb的浏览器，因为range的value计算逻辑是通用的，只需确保thumbSize与CSS中设置的宽高一致即可。

内容的提问来源于stack exchange，提问作者Al-Anazi