1
I have a drop-down menu :Hover for a div that contains 2 input, login and password, and two buttons, so when I try to type something in the div(that appeared with the li’s Hover) it goes away...
there’s something I can do to make him stay there, and only come out when you click on some other part or take out the bad ?
.box-login { position: absolute; width: 250px; z-index: 9; left: 500px; top: 65px; display: none; }
.link-login:hover li div{ display: block; }
<a href="" class="link-login"><li class="ico-login">Login
<div class="box-login">
<div class="row">
<div class="col-xs-12"><span class="tooptip"></span></div>
</div>
<div class="box-login-centro">
<div class="row">
<div class="col-xs-12 text-center"><img src="img/icon10.png" alt=""></div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row" style="margin-left: 10px;">
<div class="col-xs-2 box-login-img icon-box-login"></div>
<div class="col-xs-10"><input type="text" name="" id="" placeholder="E-mail"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row" style="margin-left: 10px;">
<div class="col-xs-2 box-login-img icon-box-senha"></div>
<div class="col-xs-10"><input type="password" name="" id="" placeholder="Senha"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6"><button style="margin-right: -10px; background-color: #38b970;">Entrar</button></div>
<div class="col-xs-6"><button style="position: absolute; margin-left: -115px; background-color: #d94843;">Cadastrar</button></div>
</div>
</div>
</div>
</div>
This feature seems to me ineffective and bad UX. You can have a JS that makes the inputs visible, is that what you want? Like:
$('.link-login').hover(function(){
 $('.box-login').show();
});
– Sergio