superposition des div

**steinfield** · 06/01/2008, 20h19

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 :

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

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>

**hellspawn_ludo** · 07/01/2008, 02h52

Bonjour steinfield,

Si j'ai bien compris, voici le code :

Code :

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

**steinfield** · 07/01/2008, 14h47

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

**hellspawn_ludo** · 08/01/2008, 01h03

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 :

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

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

**steinfield** · 10/01/2008, 15h46

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

**Candygirl** · 10/01/2008, 17h20

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

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

**steinfield** · 14/01/2008, 10h16

j'essaie ça ce soir et je vous tient au courant

**steinfield** · 16/01/2008, 11h27

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?

superposition des div

CSS

Discussions similaires

Partager

Partager