Skip to main content
adicionou 71 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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.

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", function (event) {
    elem.box.addClass("md-focus", elem.auto.val());
});

elem.auto.on("blur", 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 .box_bt {
  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 focus e blur, 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.

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("focusin", function (event) {
  elem.box.addClass("md-focus");
});

elem.auto.on("focusout", function (event) {
  elem.box.removeClass("md-focus");
});

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.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 focusin e focusiout, 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.

Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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", function (event) {
    elem.box.addClass("md-focus", elem.auto.val());
});

elem.auto.on("blur", 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 .box_bt {
  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 focus e blur, 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.