我有一个HTML 5 range元素。我需要做的是，当用户将鼠标悬停在该范围上时，拇指的高度和宽度应增加到12个像素。
的CSS
.myrange::-webkit-slider-thumb{
position:relative;
top:-5px;
appearance:none;
-webkit-appearance:none;
-webkit-transition: width 2s, height 4s;
transition: width 2s, height 4s;
border-radius:50px;
background-color:rgb(9,90,0);
border:0;
cursor:pointer;
visibility:hidden;
}
的JavaScript
var skb_rhdaseek = $("<style>", {"type": "text/css"}).appendTo("head");
$('.myrange').hover(function(){
skb_rhdaseek.text('.myrange::-webkit-slider-thumb{height:12px; width:12px;}');
});
您还必须在整个range元素中添加-webkit-appearance：none，以便其拇指样式化。最后，您不需要jquery来执行此操作。
.myrange {
-webkit-appearance: none;
height:10px;
width:200px;
background-color:#e3f2fd;
}
.myrange::-webkit-slider-thumb {
height: 10px;
width: 10px;
background: #33aaff;
cursor: pointer;
-webkit-appearance: none;
transition: height .2s ease-in-out;
}
input[type=range]:hover::-webkit-slider-thumb {
height: 30px;
}<input type="range" class="myrange" value="50">本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句