28172 sujets

CSS et mise en forme, CSS3

Formulaire de connexion dans un div:hover

Bonjour,

J'ai un formulaire de connexion dans une balise div qui a une propriété :hover : 


<div id="log-bar">
  <form>
    <input type="text" name="login">
    <input type="password" name="pass">
  </form>
</div>




#log-bar {
	// un tas de propriété
}

#log-bar:hover{
	top:-45px;
}


Donc mon div se lève vers le haut bien lorsque ma souris passe dessus, normal. En revanche, je souhaiterais, s'il est possible, faire en sorte que si on clique dans un input, mais que la souris n'est plus sur le div, ce div reste tout de même en position "top:-45px"

Si quelque chose n'est pas clair, désolé, veuillez demandé et j'essayerais de vous donner les informations plus clairement !
Zut je ne connais pas du tout le jQuery, il n'y aurait pas du tout de solution en css ?
prj19 a écrit :
En revanche, je souhaiterais, s'il est possible, faire en sorte que si on clique dans un input, mais que la souris n'est plus sur le div, ce div reste tout de même en position top:-45px;

Je ne comprends pas:
1) la signification de voir sauter une div au passage de la soiris: ergonomiquement, c'est plutôt surprenant
2) comment on peut cliquer dans un des inputs si la souris n'est pas au dessus de la div, sauf si on atteint les inputs par navigation par flèches, et dans ce cas on ne clique pas, on valide par "Enter"
En fait, le div "log-bar" est caché par un autre div partiellement, et il n'y a que un bout de "log-bar" (le haut) qui dépasse. Lorsqu'on passe la souris sur le haut qui dépasse, le div "log-bar" remonte totalement, ce qui fait que l'on voit les input du login et du mdp.

Seulement, lorsque la souris sort du div "log-bar", le div redescend et masque par conséquent les deux input.

Je voulais savoir si lorsqu'on écrit quelque chose dans les input, il est possible que le div "log-bar" ne s'abaisse plus.
J'aurais plutôt mis log-bar en avant en jouant sur zIndex. Ça devrait traiter le problème.
Non parce que justement j'ai joué avec z-index pour qu'il soit derrière l'autre div, et ainsi créer un effet "d'apparition" lorsqu'on passe sur le seul petit bout visible de log-bar
Sujet clos
Aller à