0

Bom galera eu gostaria de saber como posso fazer uma div acionar o display none quando eu estiver com focus na input ex de codigo

//CSS
.email:focus > div.oculta{
     display:none;
}
//HTML
<div class="form">
  <input type="text" class="email" name="email" placeholder="email" />
</div>

<div class="oculta">
<!-- Isso Aqui terá que ficar display none a partir do focus na input form  -->
teste
</div>

como posso fazer isso funcionar?

1 Resposta 1

1

O seu seletor CSS está aplicando display: none para um div.oculta filho de um .email:focus. No seu HTML, o div.oculta não será afetado, pois não é filho de .email:focus.

Dessa forma, você poderia fazer funcionar: utilizando o seletor ~ ou +, que selecionam elementos seguidos:

.email:focus + div.oculta{
     display:none;
}

<div class="form">
  <input type="text" class="email" name="asdasd" placeholder="email" />
  <div class="oculta">
    teste
  </div>
</div>

Caso você queira ocultar o div.oculta com o HTML dessa forma, não será possível usar seletores CSS para atingí-la a partir de .email:focus. Portanto, vai precisar de um evento JavaScript onFocus ligado ao elemento. Por exemplo:

document.querySelector('.email').onfocus = function() {
    document.querySelector('.oculta').style.display = "none";
}

document.querySelector('.email').onfocusout = function() {
    document.querySelector('.oculta').style.display = "block";
}
1
  • Poxa amigo, muitíssimo obrigado. agora compreendo. Sim realmente funciona com o js. agradeço Commented 22/09/2017 às 9:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .