Discussion :

[levasseur62]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

type="submit"

=> rechagement de page ...

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 onmouseover="bigImg(this)"

sur le input de l'adresse mail mais sans succès

[NoSmoking]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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!

[levasseur62]

@NoSmoking :

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[NoSmoking]

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.

[levasseur62]

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

le jquery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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();
			}
			}); 	
 
		});