[英]How to animate another element on hover of an element?
我有一個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;}');
});
您還必須在整個范圍元素中添加-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">
這應該可以幫助您!
$('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'>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.