如何解决根据范围滑块的拇指悬停来样式化元素
我正在尝试为范围滑块的拇指以及始终位于其上方的一些文本创建悬停效果。
我有以下代码，但我不确定应该使用哪组CSS选择器来创建正确的悬停。我尝试过<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="container">
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA" autocomplete="off">
</div>
</div>，但即使更改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 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);
}解决方法
当您在滑块上的任何位置时，都会更改内容的解决方法。那就是我能找到的最好的。 kiiinda之所以有意义，是因为无论如何您都可以拖动滑块或单击范围。也许对您有用？
$( 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 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>,
感谢大家的所有建议，我使用纯CSS进行了研究。
问题是您不能真正使用:webkit-slider-thumb作为样式CSS元素的选择器。
要解决此问题，我使用了#range作为选择器。如果我在范围滑块上的任意位置鼠标，都会触发效果触发。因此，我在范围上设置了pointer-events: none;，在范围拇指上设置了pointer-events: auto;。
我需要重新排列HTML中的元素并在CSS中修复一些样式
$( window ).on( "load",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',#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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。