Event onmouseover et onmouseout

Bonjour

Je vous explique mon problème:

J'ai deux <div>. Un est imbriqué dans l'autre.
Code:

1 2 3 4 5 6 <div...> <div...> </div> </div>
Chaque div possède les énènements suivants:
Code:

1 2 3 onmouseover="this.style.outline='#00ea40 solid thin';" onmouseout="this.style.outline='none';
Le problème c'est que même si je passe avec la souris sur le div intérieur l'évènement du div parent est aussi éxécuter.
Ca me dérange car je ne veux entourer que le div sur lequel je pointe.

Vous avez une idée comment résoudre ce problème?

Merci

bonsoir,

voici un petit code qui met en évidence les priorités des événements mouseover et mouseout sur les objets parents et enfants (là avec 3 div contenus les uns dans les autres) :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function out1() {document.getElementById("idDiv").innerHTML += " (div 1 out)";}
 
function out2() {document.getElementById("idDiv").innerHTML += " (div 2 out)";}
 
function out3() {document.getElementById("idDiv").innerHTML += " (div 3 out)";}
 
function over1() {document.getElementById("idDiv").innerHTML += " (div 1 over)";}
 
function over2() {document.getElementById("idDiv").innerHTML += " (div 2 over)";}
 
function over3() {document.getElementById("idDiv").innerHTML += " (div 3 over)";}
 
//-->
</script>
 
</head>
 
<body>
<div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="over1()" onmouseout="out1()">
div 1
<div style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;" onmouseover="over2()" onmouseout="out2()">
div 2
<div style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;" onmouseover="over3()" onmouseout="out3()">
div 3
</div></div></div>
 
<div id="idDiv"></div>
 
</body>
 
</html>

---------
et voici la réponse à ton problème :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.div1{
  width: 200px; 
  height: 200px;
}
.div2{
  width: 100px; 
  height: 100px;
  margin:30px;
}
 
.divOver{
  border: 1px #0000FF solid;
}
.divOut{
  border: 1px #AAAAAA solid;
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
var dansDiv2 = false;
function out1()
{
    document.getElementById("idDiv1").className = "div1 divOut";
}
 
function over1()
{
    if (!dansDiv2)
        document.getElementById("idDiv1").className = "div1 divOver";
}
 
function over2()
{
    dansDiv2 = true;
    document.getElementById("idDiv2").className = "div2 divOver";
}
 
function out2()
{
    dansDiv2 = false;
    document.getElementById("idDiv2").className = "div2 divOut";
}
 
//-->
</script>
 
</head>
 
<body>
 
<div class="div1 divOut" id="idDiv1" onmouseover="over1()" onmouseout="out1()">
div 1
<div class="div2 divOut" id="idDiv2" onmouseover="over2()" onmouseout="out2()">
div 2
</div></div>
 
</body>
 
</html>

la couleur du cadre dans lequel se trouve la souris devient bleu.

Merci pour ta réponse.
Mais ca marche bien pour deux div, mais si t'en a plus de 100 d'imbriqué c'est pas top.

Mais j'ai trouvé la solution. Il suffit d'appeller la méthode

Code:

event.stopPropergation();

Citation:

Envoyé par soa

Merci pour ta réponse.
Mais ca marche bien pour deux div, mais si t'en a plus de 100 d'imbriqué c'est pas top.

100 div imbriqués ??? 8O Tu fais quoi ?

stopPropagation n'est pas crossbrowser ...
il te faut aussi ajouter cancelBubble()