javascript - 如何在元素悬停时为另一个元素设置动画？

Question

我有一个 HTML 5 范围元素。我需要做的是当用户将鼠标悬停在该范围上时，拇指的高度和宽度应增加到 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;}');
});

Answer 1

您还必须将 -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">