基于范围滑块拇指悬停设置元素样式

Question

我正试图为范围滑块拇指以及一些始终位于其顶部的文本创建悬停效果。

我有以下代码，我不确定应该使用哪组CSS选择器来创建正确的悬停。我尝试过+ ~，但似乎都不起作用，即使在更改DOM中元素的顺序时也是如此。

有问题的代码是：

#range::-webkit-slider-thumb:hover + .range-value span  {
color: #008e39;
}

文本的颜色应该变成绿色。

$( window ).on( "load", function() { 
sliderValues();    
});
$( window ).resize(function() {
sliderValues();  
});
let mouseDown;
$(document).mousedown(function() {
mouseDown = true;
}).mouseup(function() {
mouseDown = false;  
});

let stepChangeThreshold = 3000;

$('#range').on('mousemove',function(e){
if (!mouseDown) return;

this.previousClientX = this.previousClientX || e.clientX;
let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);


if (this.value == stepChangeThreshold){
if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
this.step = 250;
} else {
this.step = 500;
}


}

this.previousClientX = e.clientX;
});

$('#range').on('input', function() {    
sliderValues();   
var val = $('#range').val();  
if (val >= stepChangeThreshold) {
this.step = 500;
} else {
this.step = 250;
};
this.previousVal = val;

});
function sliderValues(){
var val = $('#range').val();
var min = $('#range').attr('min');
var max = $('#range').attr('max');
var portion = (val - min) / (max - min);
$('#rangeV').html('<span>$'+ val +'</span>');
$('#rangeV').css('left', portion * ($('#range').width() - 70));

let thumbSliderRatio = (70/$('#range').width())*100;
let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";

$('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');     
};

#range {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
border-radius: 8px;
height: 7px;
width: 100%;
outline: none;

}
#range:focus {
outline: none;
}
#range::-webkit-slider-thumb {
height: 70px;
width: 70px;
border: 3px solid #008e39;
border-radius: 50%;
background-color: #008e39;
cursor: pointer;
-webkit-appearance: none;
transform: translateY(-65px);
}
#range::-webkit-slider-thumb:hover {
background-color: white;
}
#range::-webkit-slider-thumb:hover + .range-value span  {
color: #008e39;
}
#range::-moz-range-thumb {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: #008e39;
cursor: pointer;
border: none;
transform: translateY(-65px);  
}
.range-wrap{
width: 90%;
position: relative;
margin: auto;
margin-top: 120px;
}
.range-value{
position: absolute;
}
.range-value span{
width: 70px;
height: 70px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 48px;
display: block;
position: absolute;
pointer-events: none;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
margin-top: -64px;
z-index: 1;
}
.range-value span:after {
content: "";
position: absolute;
width: 0;
height: 36px;
border: 2px solid #008e39;
top: 55px;
left: calc(50% - 1px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-wrap">
<div class="range-value" id="rangeV"></div>
<input id="range" type="range" min="500" max="5000" step="250" value="1000">
</div>

Answer 1

当你在滑块上的任何位置时，它都会改变内容。这是我能找到的最好的。它kiinda是有意义的，因为你可以拖动滑块或在任何地方点击范围。也许这对你有用？

$( window ).on( "load", function() { 
sliderValues();    
});
$( window ).resize(function() {
sliderValues();  
});
let mouseDown;
$(document).mousedown(function() {
mouseDown = true;
}).mouseup(function() {
mouseDown = false;  
});

let stepChangeThreshold = 3000;

$('#range').on('mousemove',function(e){
if (!mouseDown) return;

this.previousClientX = this.previousClientX || e.clientX;
let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);


if (this.value == stepChangeThreshold){
if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
this.step = 250;
} else {
this.step = 500;
}


}

this.previousClientX = e.clientX;
});

$('#range').on('input', function() {    
sliderValues();   
var val = $('#range').val();  
if (val >= stepChangeThreshold) {
this.step = 500;
} else {
this.step = 250;
};
this.previousVal = val;

});

function sliderValues(){
var val = $('#range').val();
var min = $('#range').attr('min');
var max = $('#range').attr('max');
var portion = (val - min) / (max - min);
$('#rangeV').html('<span>$'+ val +'</span>');
$('#rangeV').css('left', portion * ($('#range').width() - 70));

let thumbSliderRatio = (70/$('#range').width())*100;
let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";

$('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');     
};

#range {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
border-radius: 8px;
height: 7px;
width: 100%;
outline: none;
}
#range:focus {
outline: none;
}
#range::-webkit-slider-thumb {
height: 70px;
width: 70px;
border: 3px solid #008e39;
border-radius: 50%;
background-color: #008e39;
cursor: pointer;
-webkit-appearance: none;
transform: translateY(-65px);
}
/*this is new*/
.range-wrap:hover  .range-value span{
color: #008e39;
}
.range-wrap:hover  #range::-webkit-slider-thumb{
background-color: white;
}
#range:hover{
cursor: pointer;
}
/*end of new*/
#range::-moz-range-thumb {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: #008e39;
cursor: pointer;
border: none;
transform: translateY(-65px);
}
.range-wrap{
width: 90%;
position: relative;
margin: auto;
margin-top: 120px;
}
.range-value{
position: absolute;
}
.range-value span{
width: 70px;
height: 70px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 48px;
display: block;
position: absolute;
pointer-events: none;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
margin-top: -64px;
z-index: 1;
}
.range-value span:after {
content: "";
position: absolute;
width: 0;
height: 36px;
border: 2px solid #008e39;
top: 55px;
left: calc(50% - 1px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-wrap">
<div class="range-value" id="rangeV"></div>
<input id="range" type="range" min="500" max="5000" step="250" value="1000">
</div>

Answer 2

感谢大家的建议，我用纯CSS解决了这个问题。问题是不能真正使用:webkit-slider-thumb作为选择器来设置CSS元素的样式。

为了解决这个问题，我使用了#range作为选择器。如果我把鼠标放在范围滑块上的任何位置，就会产生触发效果。因此，我将pointer-events: none;设置在范围上，将pointer-events: auto;设置在范围拇指上。

我需要重新排序HTML中的元素，并在CSS 中修复一些样式

$( window ).on( "load", function() { 
sliderValues();    
});
$( window ).resize(function() {
sliderValues();  
});
let mouseDown;
$(document).mousedown(function() {
mouseDown = true;
}).mouseup(function() {
mouseDown = false;  
});

let stepChangeThreshold = 3000;

$('#range').on('mousemove',function(e){
if (!mouseDown) return;

this.previousClientX = this.previousClientX || e.clientX;
let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);


if (this.value == stepChangeThreshold){
if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
this.step = 250;
} else {
this.step = 500;
}


}

this.previousClientX = e.clientX;
});

$('#range').on('input', function() {    
sliderValues();   
var val = $('#range').val();  
if (val >= stepChangeThreshold) {
this.step = 500;
} else {
this.step = 250;
};
this.previousVal = val;

});
function sliderValues(){
var val = $('#range').val();
var min = $('#range').attr('min');
var max = $('#range').attr('max');
var portion = (val - min) / (max - min);
$('#rangeV').html('<span>$'+ val +'</span>');
$('#rangeV').css('left', portion * ($('#range').width() - 70));

let thumbSliderRatio = (70/$('#range').width())*100;
let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";

$('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');     
};

#range {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
border-radius: 8px;
height: 7px;
width: 100%;
outline: none;
pointer-events: none;

}
#range:focus {
outline: none;
}
#range::-webkit-slider-thumb {
height: 70px;
width: 70px;
border: 3px solid #008e39;
border-radius: 50%;
background-color: #008e39;
cursor: pointer;
-webkit-appearance: none;
transform: translateY(-65px);
pointer-events: auto;
}
#range::-webkit-slider-thumb:hover {
background-color: white;
}
#range:hover ~ .range-value span  {
color: #008e39;
}
#range::-moz-range-thumb {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: #008e39;
cursor: pointer;
border: none;
transform: translateY(-65px);  
}
.range-wrap{
width: 90%;
position: relative;
margin: auto;
margin-top: 120px;
}
.range-value{
position: absolute;
}
.range-value span{
width: 70px;
height: 70px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 48px;
display: block;
position: absolute;
pointer-events: none;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
margin-top: -110px;
z-index: 1;
}
.range-value span:after {
content: "";
position: absolute;
width: 0;
height: 36px;
border: 2px solid #008e39;
top: 55px;
left: calc(50% - 1px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-wrap">
<input id="range" type="range" min="500" max="5000" step="250" value="1000">
<div class="range-value" id="rangeV"></div> 
</div>