如何在悬停元素上对另一个元素进行动画动画

Question

i具有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 -apperance：也不是您的整个范围元素，以便它的拇指会得到样式。最后，您不需要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">

Answer 2

这应该可以帮助您！

$('input').mouseenter(function() {
  $('input').toggleClass('over');
});
$('input').mouseleave(function() {
  $('input').toggleClass('over');
})

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range].over::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
}
/* All the same stuff for Firefox */
input[type=range].over::-moz-range-thumb {
  height: 12px;
  width: 12px;
}
/* All the same stuff for IE */
input[type=range].over::-ms-thumb {
  height: 12px;
  width: 12px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #3071a9;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #3071a9;
}
input[type=range].over::-webkit-slider-runnable-track {
  height: 6px;
}
input[type=range].over::-moz-range-track {
  height: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='range'>