Criei um div que ao clicar com o mouse em cima, o background dela é preenchida por uma determinada cor.
Existem diversas div's que agem dessa forma, alinhadas lado a lado.
Os id's dessas div's estão nomeados de forma crescente, então se tenho 4 div's por exemplo terei as div's de id's (c0,c1,c2,c3).
Caso eu clique na div c2 por exemplo, todas as div's que estão antes dela precisam receber o efeito de background preenchido.
até ai está tudo ok!
$('.circulo').click(function() {
this.style.backgroundColor = '#0099ff';
});
$('#fase-range li').click(function() {
var id = $(this).attr('id');
var num = id.split('');
num = num[1];
for (i = 0; i < num; i++) {
var newId = 'c' + i;
$('#' + newId).css('background-color', '#0099ff');
//alert(newId);
}
});
.fase-range {
list-style-type: none;
margin: 0;
padding: 0;
}
.fase-range li {
display: inline-block;
margin-right: -0.1%;
}
.lilinha {
width: 2%;
}
.licirculo {
width: 1.1%;
top: 50%;
transform: translateY(50%);
margin-left: -0.25%;
}
.ambiente {
margin-left: 5%;
width: 90%;
margin-top: 10%;
padding: 1%;
}
.circulo {
border: 1px solid #3366ff;
width: 100%;
border-radius: 100%;
height: 20px;
cursor: pointer;
transition: 3s;
}
.linha {
border-top: 1px solid #3366ff;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ambiente'>
<ul class='fase-range' id='fase-range'>
<li class='licirculo' id='c0'>
<div class='circulo'></div>
</li>
<li class='lilinha' id='l0'>
<div class='linha'></div>
</li>
<li class='licirculo' id='c1'>
<div class='circulo'></div>
</li>
<li class='lilinha' id='l1'>
<div class='linha'></div>
</li>
<li class='licirculo' id='c2'>
<div class='circulo'></div>
</li>
<li class='lilinha' id='l2'>
<div class='linha'></div>
</li>
<li class='licirculo' id='c3'>
<div class='circulo'></div>
</li>
</ul>
</div>
No entanto quando clico em alguma div, as outras div's que recebem o efeito parecem ignorar o transition, e o border-radius aplicados a elas.
- Como posso fazer pra que isso não aconteça?
- Teria que aplicar esses efeitos diretamente por Jquery?
- Por que o css perde a prioridade de setar os efeitos?