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";
}