logo标签列表

根据范围滑块拇指悬停样式元素

htmlcsshoverrange
4

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

我有以下代码，我不确定应该使用哪组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>

目前我能提供的帮助只有这篇文章：https://dev59.com/kW855IYBdhLWcg3wKw5Y 答案中对不同选择器的解释非常好。也许那可以帮到你。 - Warden330
#range::-webkit-slider-thumb:hover + .range-value span 绝对行不通 - .range-value 在 DOM 中出现在 #range 之前。即使您改变顺序，这也很可能行不通 - 您只能使用 + 或 ~ 选择 _兄弟_，范围滑块拇指可能会在某些影子 DOM 树中进一步呈现。 - CBroe
@CBroe，谢谢您指出它在Shadow DOM中呈现的事实。有没有关于如何通过JS或Jquery实现这一点的想法？ - evilgenious448
尝试通过JS/jQuery选择滑块拇指可能会遇到相同的问题，就像https://dev59.com/J2445IYBdhLWcg3wGWd7一样。 - CBroe
是的，我找不到一种只使用JQuery选择滑块拇指的方法。当悬停在#range本身上时更改span css并不难，但这也会在您不想要的情况下发生变化。 - Warden330
有没有任何解决方法可以做到这一点。我只需要在鼠标悬停在缩略图上时将文本变为绿色。可以使用CSS、JS、Jquery或其他有效的方法。 - evilgenious448
2个回答
0

一种解决办法是在滑块的任何位置进行更改。这是我能找到的最好方法。因为您无论如何都可以拖动滑块或单击范围的任何位置，所以这可能对您有用？

$( 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>

我稍微调整了你的答案，使其完全可用。非常感谢你的回答，因为你给了我实现它所需的思路和方向。 - evilgenious448
0
感谢大家提供的所有建议，我使用纯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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接