Как анимировать другой элемент при наведении элемента?

У меня есть элемент диапазона 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;}'); 
});

источник

2016-12-19 akdsfjakls

'$ (hoverelem) .hover (функция() {$ (anotherleelem) .animate (функция() {});});' –

Ваш код имеет много проблем, Также по внешнему виду вы пытаетесь изменить стили одного и того же элемента. –

@RajshekarReddy Вот почему я не мог сделать это сам, мой код не имеет большого значения. Если у вас есть лучший способ оживить «диапазон большого пальца» при наведении «range itselft», я был бы очень благодарен! – akdsfjakls

Вы должны добавить -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">

источник

2016-12-19 12:49:05

Спасибо, работал так, как хотел! – akdsfjakls

Это должно помочь вам!

$('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'>

источник

2016-12-19 12:40:54

Sry, Мой вопрос в том, как анимировать диапазон, а не диапазон трекера И анимированно не менять высоту. похож на youtube videos thumb! И спасибо за ваш ответ! – akdsfjakls

Как анимировать другой элемент при наведении элемента?

ответ

Смежные вопросы