Hugo, a solução aqui é bem simples, você deve passar a ver cada um destes conjunto de elementos
como um componente
, por exemplo os elementos
abaixo:
<div class='box'>
<label class='control-label' for='auto'>FORNECEDOR*</label>
<input type='text' class='form_campos_box' id='auto' name='nome'>
<div class="box_bt">
<i class='demo-icon'>X</i>
</div>
</div>
ao meu ver, label[for='auto']
, input#auto
e o i.demon-icon
formam um unico componente, e todos são agrupados pela div.box
neste caso é interresante que ações em qual quer um dos elementos seja refletida no componente inteiro, para isto iremos adicionar classes à div.box
.
var elem = {};
elem.auto = $("#auto");
elem.box = $(".box");
elem.auto.on("input", function (event) {
elem.box.toggleClass("md-has-value", elem.auto.val());
});
elem.auto.on("focus""focusin", function (event) {
elem.box.addClass("md-focus", elem.auto.val());
});
elem.auto.on("blur""focusout", function (event) {
elem.box.removeClass("md-focus", elem.auto.val());
});
no script acima, sempre que o input#auto
estiver com focus, a div.box
vai possuir a classe md-focus
, e quando o input#auto
, a div.box
vai possuir a classe md-has-value
.
então agora no lugar de setar a cor com
.box_bt:hover {
color: #1E90FF;
}
você vai setar com
.box.md-focus i ,
.box_btbox.md-focus label {
color: #1E90FF;
opacity: 1;
}
.box.md-focus {
border-color: #1E90FF;
}`
no exemplo acima estou aplicando a cor quando o input ganha focus, e não quanto o mouse passa sobre o mesmo, pois isto está mais proximo do comportamento do Android...
Em todo caso, você pode substinuit os eventos focusfocusin
e blurfocusiout
, pelos mouseenter
e mouseleave
...
no exemplo acima, tambem faço um toggle da classe ms-has-value
, pois você pode querer aplicar um efeito no label caso o input tenha algum valor.