要素のホバー上で別の要素をアニメートする方法は？

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-外観を追加する必要がありません：あなたの全体の範囲の要素のどれにもその親指がスタイルになるだろうようにします。最後に、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'>