为什么 -webkit-slider-thumb:hover 不起作用?

Question

input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
width: 300px;
height: 20px;
background: lime;
}
input[type=range]::-webkit-slider-thumb,
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
background: red;
}
input[type=range]::-webkit-slider-thumb:hover,
input[type=range]::-moz-range-thumb:hover {
background: yellow;
}

<input type="range">

为什么悬停不起作用？当我在悬停时将背景颜色设置为黄色时，它应该可以完成任务。

Answer 1

为 Firefox 放置单独的 css 并尝试。

input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
width: 300px;
height: 20px;
background: lime;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
}
input[type=range]::-webkit-slider-thumb:hover {
background: yellow;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
width: 20px;
height: 20px;
background: red;
}
input[type=range]::-moz-range-thumb:hover {
background: yellow;
}

<input type="range">