【发布时间】：2020-09-18 05:44:09
【问题描述】：
我正在尝试为范围滑块拇指以及始终位于其顶部的一些文本创建悬停效果。
我有以下代码，但我不确定应该使用哪组 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>【问题讨论】：
-
现在我可以给你的帮助是这篇文章：stackoverflow.com/questions/4502633/…关于答案中的不同选择器有一些非常好的解释。也许这可以帮助你
-
#range::-webkit-slider-thumb:hover + .range-value span绝对不能工作 -.range-value在 之前#range在 DOM 中。即使您更改顺序，这也可能不起作用 - 您只能使用+或~选择 siblings，范围滑块拇指可能会在某些阴影 DOM 树中进一步向下渲染. -
@CBroe 感谢您指出它在 shadow DOM 中呈现。关于如何通过 JS 或 Jquery 做到这一点的任何想法？
-
尝试通过 JS/jQuery 选择滑块拇指，可能会遇到同样的问题，如 stackoverflow.com/q/5041494/1427878
-
是的，我找不到使用 JQuery 选择滑块拇指的方法。将 #range 本身悬停时更改跨度 css 并不难，但在您不希望它的情况下也会更改