superposition des div

Version imprimable

Bonjour,

je n'arrive pas à trouver comment arriver à mon résultat.

J'ai un div qui s'affiche dans un div plus grand. Je veux, lorsque je passe ma souris dans le div "truc", que du texte apparaisse dans le div "machin" et disparaisse quand je quitte le div "truc"

Mon probleme est que quand la souris passe dans le div "machin", ca considère que c'est une sortie du div "truc", et donc ca merde complètement...

J'ai essayé de joué avec le z-index mais rien de concluant et surtout c barbare meme si ca marchait, et la transparence c'est une mauvaise idée aussi.
Donc est ce qu'il y a des attributs à configurer pour rendre un div affichable mais qu'il ne réagisse pas a du onMouse* ou qu'il soit totalement inclus dans le div plus grand (j'ai déjà essayé de faire du <div><div></div></div> ca marche pas plus)

Ou est ce que je dois demander du coté du javascript?

Merci d'avance.

Pour l'exemple, voila mon code
Code:

1 2 3 4 5 <div id="truc" style="position:absolute;top:500;left:100; width:200px; height:200px; display:block; z-index:2; background-color:#000000" onMouseOver="alert('entrée');" onMouseOut="alert('sortie');"> </div> <div id="machin" style="position:absolute;top:550;left:150;width:100px; height:100px; display:block; z-index:1; background-color:#FFFFFF"> </div>

Bonjour steinfield,

Si j'ai bien compris, voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
  <div id="truc"  style="position:absolute;
			top:500px;left:100px; 
			width:200px; height:200px;  
			display:block;  
			background-color:green" onMouseOver=document.getElementById('machin').innerHTML='TexteMachin'
			onMouseOut=document.getElementById('machin').innerHTML=''>	
 
 
 </div>
 
 <div id="machin" style="position:absolute;
			top:550px;left:150px;
			width:100px; height:100px; 
			display:block;  background-color:red">
 
 </div>

C'est bien ça ?

;)

07/01/2008, 14h47
steinfield

voilà, ca correspond à ça.

Et le problème est bien que quand la souris passe sur le div "machin", l'évènement "onMouseOut" du div "truc" s'active. Et quand je suis dans le div "machin" et que je sorts de ce div, l'évenement "OnMouseOver" du div "truc" s'active...

J'avais donc pensé au z-index, qui effectivement fait que le div en dessous ne réagit plus, mais le problème est que le div en dessous ne s'affiche plus non plus...

Et la transparence est à exclure vu qu'il y aura de la couleur/image. Et d'autres div, toussa toussa, j'ai simplifié pour l'exemple.

Bref c'est un beau casse tete, il faudrait que le div "machin" apparaisse mais tout en étant considéré comme SOUS le div "truc".

Donc je pense que ça doit être faisable avec du CSS en combinant des attributs que je ne connais pas...
08/01/2008, 01h03
hellspawn_ludo
Bonsoir Steinfield,

J'y connais encore pas grand chose au CSS mais tu peux jouer avec le z-index.

Si tu mets dans le onmouseover du div 'truc' :
Code:

1 2 document.getElementById('machin')style.zIndex='2'
le carré 'machin' apparaîtra par dessus le carré 'truc'.

Essaie de voir avec cette propriété.

;)
10/01/2008, 15h46
steinfield

Oui merci j'avais déjà essayé comme précisé dans mon message mais ça ne marche pas car si le div dessous ne réagit pas a du onMouse, il n'est pas visible non plus.

Moi il faudrait qu'il soit visible mais ne réagisse pas non plus :p

Je ne sais pas si une solution du genre correspond à ce que tu souhaites faire ?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Texte qui apparait</title>
<style type="text/css">
* {margin:0;padding:0;}
 
div,a {
        background-color:red;
        padding:2em;
        float:left;
        margin:1em;
        text-decoration:none;
        color:black;
}
 
p,span {
        visibility:hidden;
        display:block;
        background:green;
        padding:1em;
}
 
a:hover {border:0;} /* fix bug IE6 */
 
div:hover p,a:hover span {
        visibility:visible;
}
</style>
</head>
 
<body>
<div><p>text qui apparaît au survol <br />fonctionne nav. récents <br />sauf IE 6</p></div>
<a href="#"><span>text qui apparaît au survol <br />fonctionne sur IE 6 <br />grâce à la balise a</span></a>
</body>
</html>

14/01/2008, 10h16
steinfield

j'essaie ça ce soir et je vous tient au courant
16/01/2008, 11h27
steinfield

avec un peu de retard, ça marche nickel merci :)

Petite question subsidiaire qui va avec, je vois que y'a du :hover utilisé pour cette solution, ça ne risque pas de poser de probleme si j'utilise du javascript en meme temps, du onMouseOver par exemple?