Event onmouseover et onmouseout

**soa** · 24/11/2007, 17h30

Bonjour

Je vous explique mon problème:

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

Code :

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

1
2
3
4
5
6
 
<div...>
     <div...>
 
     </div>
</div>

Chaque div possède les énènements suivants:

Code :

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

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

**Auteur** · 24/11/2007, 23h17

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

**soa** · 25/11/2007, 12h48

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 :

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