Mon div disparait lors du choix de mon identifiant

Version imprimable

Bonjour,

j'ai créé un div qui s'affiche, lorsque l'on met la souris sur un lien, mon div s'affiche bien cependant lorsque je veux renseigner mon identifiant en cliquant sur les choix proposés ( voir photo) celui-ci disparait ...
http://imageshack.us/content_round.p...KuS2eXR1afU48o

J'aimerais savoir comment faire, pour afficher toujours le div lors de la sélection de mon identifiant.

le HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id="layer_compte_off" style="display: none;" onmouseover="bigImg(this)" onmouseout="normalImg(this)"   >
	<div class="compte_off_haut">
		<div class="compte_off_bas">
			<div class="compte_txt">
				<form id="form_connexion_mon_compte" method="post" action="#">
					<div class="cpt_1">
						DéJà CLIENT ?
					</div>
					<div class="cpt_2">
						Mon email
					</div>
					<div class="cpt_3">
						<input id="email_address" class="input_compte" type="text" value="" name="email_address" >
					</div>
					<div class="cpt_4">
						Mot de passe
					</div>
					<div class="cpt_5">
						<input id="password" class="input_compte" type="password" value="" name="password">
					</div>
					<div class="cpt_7">
						<input id="persist_box" type="checkbox" checked="checked" value="1" name="session_active">
						<label name="persist_box">Se souvenir de moi</label>
					</div>
					<div class="separateur_panier"></div>
					<div id="submit_connexion_mon_compte" class="cpt_6">
						<input id="formulaire_connexion_mon_compte" class="btn_ok" type="submit" value="ok" name="ok">
					</div>
				</form>
			</div>
			<div class="separateur_compte_off"></div>
			<div class="nv_client">NOUVEAU CLIENT ?</div>
			<div class="creer_compte">
				<a href="./inscription.php">Créer mon compte</a>
			</div>
		</div>
	</div>
</div>

le Javascript :

Code:

1
2
3
4
5
6
7
8
function bigImg(x){
	document.getElementById("layer_compte_off").style.display="block";
	return true;
}
function normalImg(x)
{
document.getElementById("layer_compte_off").style.display="none";
}

Merci

22/10/2013, 12h58
SpaceFrog

Citation:

type="submit"

=> rechagement de page ...
22/10/2013, 19h03
levasseur62

en faite lorsque je rentre la première lettre de mes identifiants firefox me propose de compléter celui-ci en ajoutant des suggestions, (voir image -> http://imageshack.us/scaled/thumb/89/5j6.png ) et lorsque je clique sur l'une de ces suggestions mon div disparait ....

j'ai essayé de faire un

Code:

onmouseover="bigImg(this)"

sur le input de l'adresse mail mais sans succès
22/10/2013, 19h49
NoSmoking

Bonjour,
j'ai un petit problème de compréhension à la lecture du code

Code:

<div id="layer_compte_off" style="display: none;" onmouseover="bigImg(this)" onmouseout="normalImg(this)" >

comment fais tu pour avoir un événement onmouseover sur un élément non affiché, d'autant que cela doit être la fonction déclenchée qui doit montrer l'élément ?

Je penses que ces points sont à éclaircir!
22/10/2013, 21h01
levasseur62
@NoSmoking :

effectivement j'ai oublié une balise div voir le code ci-dessous
Code:

1 2 3 4 <div id="top4"> <span>|</span><a href="mon_compte.php" onmouseover="bigImg(this)" > Mon compte</a> </div>
dans l'image ci-dessous, on peut voir le div lorsque la souris est sur celui-ci, et le div qui disparait lorsque la souris et sur l'une des propositions (mag, pretre etc ...)

http://www.hostingpics.net/viewer.ph...33317image.png
23/10/2013, 08h34
Bovino
C'est un grand classique de onmouseover et onmouseout.
Si tu envisages ta page comme un empilement de calques, tu pourras comprendre qu'une div présente dans une autre va masquer une partie de son élément parent.
Du coup, lorsque tu survoles la première div, l'événement mouseover va se déclencher comme attendu, mais lorsque tu survoles la div enfant, alors tu ne survoles plus la div parente et l'événement mouseout se déclenche.

jQuery pallie ce problème connu avec les événement internes mouseenter et mouseleave qu'il est possible de reproduire en JavaScript natif en utilisant l'objet event associé à l'événement pour récupérer l'élément ayant reçu l'événement et en vérifiant :
- sur le mouseover que l'élément qui a reçu l'événement n'est pas un enfant de celui en cours de survol ;
- sur le mouseout que l'élément qui a reçu l'événement est bien le parent.
23/10/2013, 18h26
NoSmoking

Citation:

Du coup, lorsque tu survoles la première div, l'événement mouseover va se déclencher comme attendu, mais lorsque tu survoles la div enfant, alors tu ne survoles plus la div parente et l'événement mouseout se déclenche.

ce qui n'est pas le cas en CSS avec la pseudoclasse :hover.

j'ai résolu le problème, voici la correction :

le jquery:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){		
		  $('#top4').hover(function() {
		  $('#layer_compte_off').show();			
		  }); 		
 
		 $('#layer_compte_off').mouseenter(function() {
	     $("#layer_compte_off").css("display","block");
		 }).mouseleave(function(event){
			if(event.target.tagName != 'INPUT') {
			$('#layer_compte_off').fadeOut();
			}
			}); 	
 
		});