onmouseover imbriqués et IE6

Version imprimable

:salut:

Je rencontre un problème de gestion d'évènements onmouseover/onmouseout appliqués à des éléments imbriqués.

Voici le comportement que je souhaite reproduire :
onmouseover d'un DIV, cet élément change de style (changement de la couleur du cadre); onmouseout rétablit le style initial du DIV.
onmouseover d'un SPAN contenu dans le DIV, le SPAN change de style (changement de sa couleur de fond); onmouseout rétablit le style initial du SPAN.
le onmouseover du SPAN ne doit pas déclencher le onmouseout du DIV
Le code qui suit fonctionne correctement sous la plupart des navigateurs (firefox, opera, safari) mais pas sous Ie6 qui déclenche le onmouseout du container quand on survole le contenu (provoque un clignotement fort désagréable qui "pique les yeux").
Code:

1 2 3 4 5 6 7 8 9 10 <div id="container" onmouseover="this.className='container containerOver'" onmouseout="this.className='container'"> <table> <tr> <td> <span id="content" onmouseover="this.className='content contentOver'" onmouseout="this.className='content'">bla bla bla..</span> </td> </tr> </table> </div>
S'agit-il d'un bugg Ie :aie: ou dois-je implémenter une meilleure gestion de mes évènements (propagation etc..) ??

bonjour,

Citation:

S'agit-il d'un bugg Ie ou dois-je implémenter une meilleure gestion de mes évènements (propagation etc..) ??

Ce n'est pas un bug. Et ce phénomène ne concerne pas que IE : tu le retrouves sous FF aussi (cf. les explications ci-dessous). Il faut effectivement stopper la propagation des événements.

Si je ne me trompe pas pour Firefox tu as les méthodes stoppropagation() et pour IE cancelbubble(). Pour les autres navigateurs je ne sais pas.

Ce qu'il se passe :
1- Quand tu entres dans le span tu sors du div (onmouseout sur le div puis onmouseover sur le span) ;
2- Quand tu es dans le span, tu as un onmouseover sur le div car le span est enfant du div (tu as donc ce clignotement) ;
3- Quand tu sors tu span, tu sors du div également (onmouseout sur le span puis onmouseout sur le div) ;
4- Mais à la sortie du span tu es encore dans le div : onmouseover sur le div.

Mais ce phénomène n'existe pas seulement sur IE, tu le retrouves sur Firefox (par exemple). Voici un script qui le met en évidence (passe la souris sur le texte en gras et regarde l'affichage ;) )
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 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="over1()" onmouseout="out1()"> bla bla bla bla bla bla bla bla bla bla <span style="font-weight: bold; color: #0000FF" onmouseover="over2()" onmouseout="out2()"> ceci est le contenu du span ceci est le contenu du span </span> bla bla bla bla bla bla bla bla bla bla </div> <div id="idDiv"></div> </body> </html>

28/01/2008, 00h55
picwic

Ok. C'est bien ce que je pensais. Volià ce que l'on obtient :

(div over) (div out) (span over) (div over) (span out) (div out) (div over) (div out)

Maintenant, je ne vois vraiment pas quel doit être l'enchainement d'actions à implémenter (quelle action déclenche ou annihile telle autre etc..). Et plus simplement, comment réaliser le wrokflow suivant?

(div over) (span over) (span out) (div out)

D'ailleurs, est-ce seulement possible? :?
28/01/2008, 09h10
SpaceFrog

Auteur t'as donné cancelbubble et stoppropagation ...
28/01/2008, 10h34
picwic

Merci SpaceFrog, j'avais bien compris qu'il faut utiliser cancelBubble et stopPropagation.. ;)

C'est d'ailleurs ce que j'ai fais au travers de l'exemple de Auteur sans toutefois parvenir au résultat escompté. Je ne vois pas comment y arriver en stoppant uniquement la propagation d'un ou des évènements du SPAN ou du DIV.

Faut-il par exemple stopper le onmouseout du DIV quand on pénètre le DIV (ou le SPAN) et le réactiver quand on sort du SPAN (car il faut bien détecter la sortie du DIV)? Mais dans ce cas, la sortie du DIV ne serait jamais détectée si l'on ne passe pas sur le SPAN..

Si je me/vous perds dans mes explications, n'hésitez pas à me reprendre!!
28/01/2008, 10h46
le_chomeur

Moi je dis on vote !

sinon pour ceux qui en veulent pas voila ;) :
( je pars sur l'exemple de FF )

(div over) => comportement normal
(span over) => stoppropagation() du div out
(span out) => remise en place du div out et stoppropagation() du div over /!\
(div out) => ta fonction de div out normale

ce qui devrait donner au survol :

survol de la div = affichage
survol du span = out de la div = élément toujours affiché
out du span = over du div = élément toujours affiché
out du div = élément masqué

voila l'algo :)
28/01/2008, 23h18
picwic
le_chomeur merci mais je n'arrive pas à stopper la propagation au moment du (span over).

Si on reprend l'exemple de Auteur, comment peut-on récupérer l'event lié au (div out) car l'event reçu est celui du (span over) ??
Code:

1 2 3 4 5 function over2(event) { document.getElementById("idDiv").innerHTML += " (span over)"; event.stopPropagation(); // on stop la propagation lié au (span over) }
De plus, il me semble que le (div out) soit détecté avant le (span over) ce qui rendrait ta méthode inefficace..

mouai.. ça se bouscule pas au portillon pour répondre. :(

en stoppant tous les events, y'a du progrés :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function out1(ev) { document.getElementById("idDiv").innerHTML += " (div out)"; ev.stopPropagation(); return false; } function over1(ev) { document.getElementById("idDiv").innerHTML += " (div over)"; ev.stopPropagation(); return false; } function out2(ev) { document.getElementById("idDiv").innerHTML += " (span out)"; ev.stopPropagation(); return false; } function over2(ev) { document.getElementById("idDiv").innerHTML += " (span over)"; ev.stopPropagation(); return false; }
Voilà ce que l'on obtient :
(div over) (div out) (span over) (span out) (div over) (div out)

Reste à ne plus déclencher le premier (div out) ainsi que le dernier (div over).
Quelqu'un?

29/01/2008, 11h38
le_chomeur

en mettant un timer de 500mseconde ?
qui permettrait de savoir si l'on est sur la span pour déclencher ou non le vrai divout ?

voici un exemple avec des timer et des flag. Il faut une temporisation assez longue sur le chrono. Par contre il ne faut pas la faire trop longue sinon les événements se réalisent avec un certain retard.

Pour moi 200ms est une bonne valeur ;)

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.div1{
  width: 200px; 
  height: 200px;
  border: 1px solid #AAAAAA;
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
var spanOver = false;
var chrono = null;
var tempo = "200";  // 200 ms
 
 
function Timer_MouseOutDiv()
{
    document.getElementById("msg").innerHTML += "divOut ";
    // actions à réaliser lors du MouseOut sur le div
 
    spanOver = false;
    chrono = null;
}
 
 
function MouseOutDiv()
{
    chrono = setTimeout("Timer_MouseOutDiv()", tempo);
}
 
function MouseOverDiv()
{
    if (chrono!=null)
    {
        clearTimeout(chrono);
        chrono = null;
    }
 
    if (!spanOver)
    {
        document.getElementById("msg").innerHTML += "divOver ";
        // actions à réaliser lors du MouseOver sur le div
    }
}
 
function MouseOverSpan()
{
    spanOver = true;
    if (chrono!=null)
    {
        clearTimeout(chrono);
        chrono = null;
    }
 
    document.getElementById("msg").innerHTML += "spanOver ";
    // actions à réaliser lors du MouseOver sur le span
}
 
//------------
function Timer_MouseOutSpan()
{
    document.getElementById("msg").innerHTML += "spanOut ";
    // actions à réaliser lors du MouseOut sur le span
 
    spanOver = false;
    chrono = null;
}
 
function MouseOutSpan()
{
    if (chrono!=null)
    {
        clearTimeout(chrono);
        chrono = null;
    }
 
    chrono = setTimeout("Timer_MouseOutSpan()", tempo);
}
 
//-->
</script>
 
</head>
 
<body>
 
<div class="div1 divOut" id="idDiv1" onmouseover="MouseOverDiv()" onmouseout="MouseOutDiv()">
bla bla bla bla bla bla bla bla bla bla bla bla
 
<span style="color: #0000FF; font-weight: bold" onmouseover="MouseOverSpan()" onmouseout="MouseOutSpan()">
contenu du span contenu du span contenu du span contenu du span
</span>
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
<p id="msg"></p>
 
</body>
 
</html>

29/01/2008, 19h01
picwic

Auteur, le coup des timers/flags, j'ai déjà essuyé quelques plâtres avec et je suis pas super chaud pour les utiliser dans ce contexte. :?

Je préfèrerais une solution 'w3c compliant'.. Ceci dit, je vais quand même tester de l'intégrer des fois que..

Merci pour votre implication. Il est vraiment important pour moi de résoudre ce problème.
30/01/2008, 23h23
picwic

Bon en fait ça va pas le faire du tout ta solution Auteur.
Le système peut comporter pas mal de conteneurs dont les éléments contenus ne sont pas uniques et parfois même nombreux.
Et puis j'ai peur que l'affichage se dégrade sur les autres plateformes qui elles rendent nickel à la base...

Il me faut du robuste !!!

:help:

Citation:

Envoyé par picwic

Bon en fait ça va pas le faire du tout ta solution Auteur.
Le système peut comporter pas mal de conteneurs dont les éléments contenus ne sont pas uniques et parfois même nombreux.
Et puis j'ai peur que l'affichage se dégrade sur les autres plateformes qui elles rendent nickel à la base...

Au lieu d'utiliser des span, tu peux utiliser la balise a et sa pseudo classe hover ?
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 <html> <head> <title></title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <div class="div1 divOut" id="idDiv1" onmouseover="MouseOverDiv()" onmouseout="MouseOutDiv()"> bla bla bla bla bla bla bla bla bla bla bla bla <a style="color: #0000FF; font-weight: bold" href="#" onclick="return false"> contenu du span contenu du span contenu du span contenu du span </a> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div> </body> </html>

31/01/2008, 13h07
picwic

Citation:

Envoyé par Auteur

Au lieu d'utiliser des span, tu peux utiliser la balise a et sa pseudo classe hover ?

Non. Le système que je développe est 'Full Ajax'. Si je remplace les balises span par des balises a, je vais devoir leur coller des this.blur() au onclick, ce que je voudrais éviter.
04/02/2008, 11h18
picwic

Je ne peux pas croire que personne ne sait comment utiliser cancelBublle/stopPropagation pour régler mon souci de mosueover/mouseout imbriqués!!!!

Pffff.... :(
04/02/2008, 11h31
le_chomeur

Citation:

Je ne peux pas croire que personne ne sait comment utiliser cancelBublle/stopPropagation pour régler mon souci de mosueover/mouseout imbriqués!!!!

Pffff....

:? n'oublis jamais que les gens sont ici pour aider , dans la mesure du possible ou leur occupation personnel / professionel leur permet !
donc prend ton mal en patience en attendant que quelqu'un puissse se pencher plus en avant sur ton problème :)

Merci...

pour le je regarde en début d'après midi ...
04/02/2008, 13h03
picwic

Bah ! On est tous logé à la même enseigne je crois!!
J'étais juste désespéré voilà tout... mdr :D

Plus sérieusement, je vais "googler" davantage pour comprendre la propagation des évenements. Ca peut pas faire de mal! ;)
04/02/2008, 13h12
le_chomeur

Citation:

Bah ! On est tous logé à la même enseigne je crois!!

Si si je t'assure :)

Bon j'ai réussis, c'est tout bète ...
tu as le bon code avec les stopPropagation() il te manque juste une condition :)
je te laisse chercher c'est très simple ...

J'ai finalement trouvé une solution sur le site quirksmode.org : http://www.quirksmode.org/js/events_mouse.html
(voir le paragraphe "Mousing out of a layer")

Voilà ce que ça donne avec l'exemple :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<html>
  <head>
    <style type="text/css">
      .div1{
        width: 200px; 
        height: 200px;
        border: 1px solid #AAAAAA;
      }
      .overDiv {background-color : red;}
      .outDiv {background-color: white;}
      .overSpan {background-color: orange;}
      .outSpan {background-color: white;}
    </style>
 
 
    <script type="text/javascript">
 
      function out1(e) {
          // compatibilité
          if (!e) var e = window.event;
 
          // élément duquel on arrive 
          var tg = (window.event) ? e.srcElement : e.target;
          if (tg.id != 'div') {
              return;
          }
 
          // élément vers lequel on va
          var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
          while (reltg != tg && reltg.nodeName != 'BODY') {
              reltg = reltg.parentNode
          }
 
          // ?
          if (reltg == tg) {
              return;
          }
 
          // action
          this.className = "outDiv";
          document.getElementById("msg").innerHTML += " (div out)";
      }
 
      function over1() {
          // action
          this.className = "overDiv";
        document.getElementById("msg").innerHTML += " (div over)";
 
        return;
      }
 
      function out2() {
          // action
          this.className = "outSpan";
        document.getElementById("msg").innerHTML += " (span out)";
 
        return;
      }
 
      function over2() {
          // action
          this.className = "overSpan";
        document.getElementById("msg").innerHTML += " (span over)";
 
        return;
      }
    </script>
  </head>
 
  <body>
 
    <div id="div" class="outDiv" style="width: 200px;height:200px;border:1px solid #AAAAAA;">
      bla bla bla bla bla bla bla bla bla bla bla bla
      <span id="span" class="outSpan" style="color: #0000FF; font-weight: bold">
          contenu du span contenu du span contenu du span contenu du span
      </span>
      bla bla bla bla bla bla bla bla bla bla bla bla
      bla bla bla bla bla bla bla bla bla bla bla bla
    </div>
 
    <p id="msg"></p>
 
    <script type="text/javascript">
      var div=document.getElementById("div");
      div.addEventListener("mouseover", over1, false);
      div.addEventListener("mouseout", out1, false);
 
      var span=document.getElementById("span");
      span.addEventListener("mouseover", over2, false);
      span.addEventListener("mouseout", out2, false);
    </script>
 
  </body>
</html>

le_chomeur, c'est quoi ta solution "toute bête" à toi ?

05/02/2008, 13h05
picwic

La solution que j'ai posté fonctionne mais elle reste appropriée pour un DIV contenant des SPAN. Et tout se complique de mon côté car ces DIV sont composés de SPAN ou de DIV encapsulés par des TABLE.. :arf:

le_chomeur, concernant ta solution, je donne ma langue au chat...

le_chomeur, je viens de tester la solution que tu m'as envoyé. Elle fonctionne avec l'exemple simple. On avance! Maintenant, si tu aimes relever les défis (hé hé!!! :mrgreen:), je te joins le casse tête ultime :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
<html>
  <head>
    <style type="text/css">
      .overDiv {background-color : red;}
      .outDiv {background-color: white;}
      .overSpan {background-color: orange;}
      .outSpan {background-color: white;}
      table, tr, td {border: 2px solid #111CCC;}
    </style>
 
    <script type="text/javascript">
 
      function out1(e) {
          // compatibilité
          if (!e) var e = window.event;
 
          // élément duquel on arrive 
          var tg = (window.event) ? e.srcElement : e.target;
          if (tg.id != 'conteneur') {
              return;
          }
 
          // élément vers lequel on va
          var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
          while (reltg != tg && reltg.nodeName != 'BODY') {
              reltg = reltg.parentNode
          }
 
          // ?
          if (reltg == tg) {
              return;
          }
 
          // action
          document.getElementById("conteneur").className = "outDiv";
          document.getElementById("msg").innerHTML += " (conteneur out)";
      }
 
      function over1(e) {
        // action
        document.getElementById("conteneur").className = "overDiv";
        document.getElementById("msg").innerHTML += " (conteneur over)";
 
        // on stop la propagation de tous les éléments enfants
        if(e.cancelBubble) {
              e.cancelBubble = true;
        }
        else {
              e.stopPropagation();
        }
 
        return;
      }
 
      function out2(id) {
        // action
        document.getElementById(id).className = "outSpan";
        document.getElementById("msg").innerHTML += " (span out)";
        return;
      }
 
      function over2(id) {
        // action
        document.getElementById(id).className = "overSpan";
        document.getElementById("msg").innerHTML += " (span over)";
        return;
      }
    </script>
  </head>
 
  <body>
   <div style="padding:100px;width:400px;height:400px;background-color:green;">
    <div id="conteneur" class="outDiv" style="width: 200px;border:2px solid #666DDD">
      <table>
          <tr>
            <td>
            <span id="span1" name="highlight" class="outSpan" style="color: #0000FF; font-weight: bold">
                contenu du span 1
            </span>
          </td>
          <td>
            <span id="span2" name="highlight" class="outSpan" style="color: #0000FF; font-weight: bold">
                contenu du span 2
            </span>
          </td>
        </tr>
        <tr>
            <td colspan=2>
            <div id="div1" name="highlight" class="outSpan" style="color: #0000FF; font-weight: bold">
                contenu du div 1
            </div>
          </td>
        </tr>
        <tr>
          <td colspan=2>
            <span id="span3" name="highlight" class="outSpan" style="color: #0000FF; font-weight: bold">
                contenu du span 3
            </span>
          </td>
        </tr>
      </table>
    </div>
 
    <p id="msg"></p>
  <div>
    <script type="text/javascript">
 
      // ajout event listener sur conteneur
      var conteneur = document.getElementById("conteneur");
      conteneur.onmouseover = function(e) {
          over1(e);
      }
      conteneur.onmouseout = function(e) {
          out1(e);
      }
 
      // ajout event listener sur les spans
      var spans = document.getElementsByName("highlight");
      for (var i=0; i<spans.length; i++) {
        var span = spans[i];
        span.onmouseover = function() {
            over2(this.id);
        }
        span.onmouseout = function() {
            out2(this.id);
        }
      }
    </script>
 
  </body>
</html>

Dans cet exemple un poil plus complexe, il arrive qu'un mouseout attendu au niveau du conteneur ne se produise pas. :aie:

06/02/2008, 11h51
le_chomeur

Je le sens mal lol... je regarde ce soir ou dès que j'ai un peu plus de temps car la ça m'a l'air déja plus complexe que la solution que je t'ai envoyé ^^
06/02/2008, 11h59
Auteur

Citation:

Envoyé par le_chomeur

Je le sens mal lol... je regarde ce soir ou dès que j'ai un peu plus de temps car la ça m'a l'air déja plus complexe que la solution que je t'ai envoyé ^^

dommage que l'on ait pas profité de la solution envoyée :roll:

le_chomeur : tu pourrais poster le code en question ? (je suis curieux de le voir, et j'aimerais bien l'étudier ;) )
:merci: ;)
06/02/2008, 12h14
picwic

Citation:

Envoyé par le_chomeur

Je le sens mal lol...

yep c'est pas gagné c't'affaire. :?

Citation:

Envoyé par le_chomeur

je regarde ce soir ou dès que j'ai un peu plus de temps car la ça m'a l'air déja plus complexe que la solution que je t'ai envoyé ^^

Je vais en profiter pour bosser un peu.... mdr
06/02/2008, 13h45
le_chomeur
Code:

1 2 Le_chomeur : tu pourrais poster le code en question ? (je suis curieux de le voir, et j'aimerais bien l'étudier )
Aie j'ai supprimé tous mes MP car je n'avais plus de place juste après l'envois du message , picwic peux tu mettres ce que je t'ai envoyé ?

Sinon niveau algo :

je récupère uniquement le mouseover sur le div et annile les autres over / out de ce qu'il contient :) et récupère le mouseout a la sortie normale :)

Pour Auteur, je poste le message de le_chomeur :

Citation:

Envoyé par le_chomeur

Voila , j'ai repris une partie du code que tu avais fais , ( je n'ai pas utiliser ma méthode, car en relisant ton post j'ai vu que tu avais d'autre élément a l'intérieur de tes divs et avec ma méthode il aurais fallut utiliser une fonction récursive pour bloquer tous les évènements des enfant :?

Donc je bloque l'évènement du parent simplement ^^

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<html>
  <head>
    <style type="text/css">
      .div1{
        width: 200px; 
        height: 200px;
        border: 1px solid #AAAAAA;
      }
      .overDiv {background-color : red;}
      .outDiv {background-color: white;}
      .overSpan {background-color: orange;}
      .outSpan {background-color: white;}
    </style>
 
 
    <script type="text/javascript">
 
      function out1(e) {
          // compatibilité
          if (!e) var e = window.event;
 
          // élément duquel on arrive 
          var tg = (window.event) ? e.srcElement : e.target;
          if (tg.id != 'div') {
              return;
          }
 
          // élément vers lequel on va
          var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
          while (reltg != tg && reltg.nodeName != 'BODY') {
              reltg = reltg.parentNode
          }
 
          // ?
          if (reltg == tg) {
              return;
          }
 
          // action
          this.className = "outDiv";
          document.getElementById("msg").innerHTML += " (div out)";
      }
 
      function over1(e) {
          // action
         this.className = "overDiv";
        document.getElementById("msg").innerHTML += " (div over)";
 
        //On stop la propagation de tous les éléments enfant
        if(e.cancelBubble)
        {
              e.cancelBubble = true;
        }
        else {
              e.stopPropagation();
        }
 
        return;
      }
    </script>
  </head>
 
  <body>
   <div style="width:400px;height:400px;background-color:green;">
    <div id="div" class="outDiv" style="width: 200px;height:200px;border:1px solid #AAAAAA;">
      bla bla bla bla bla bla bla bla bla bla bla bla
      <span id="span" class="outSpan" style="color: #0000FF; font-weight: bold">
          contenu du span contenu du span contenu du span contenu du span
      </span>
      <div style="width:40px;height:40px;background-color:yellow;">
      </div>
      bla bla bla bla bla bla bla bla bla bla bla bla
      bla bla bla bla bla bla bla bla bla bla bla bla
    </div>
 
    <p id="msg"></p>
  <div>
    <script type="text/javascript">
      var div=document.getElementById("div");
      div.addEventListener("mouseover", over1, false);
      div.addEventListener("mouseout", out1, false);
    </script>
 
  </body>
</html>

je pense que c'est le résultat escompté :

survol de la div verte : rien
survol de la div souhaité : rouge
survol des éléments a l'intérieur ( n'importe lesquels , la div reste rouge !
survol en dehors de la div : elle redevient normal

En espérant avoir bien situé ton problème :)

06/02/2008, 17h04
Auteur

Citation:

Envoyé par picwic

Pour Auteur, je poste le message de le_chomeur :

merci :ave: je vais étudier ça ;)
26/02/2008, 20h58
picwic

Citation:

Envoyé par Auteur

merci :ave: je vais étudier ça ;)

Alors cette étude, ça avance?! ;)
26/02/2008, 21h42
Auteur

Citation:

Envoyé par picwic

Alors cette étude, ça avance?! ;)

Non, je n'ai pas eu le temps de m'en occuper.

Il faut que je reprenne le sujet au début, je l'ai complètement oublié.
29/02/2008, 12h31
picwic

At last !!!!

En relisant l'article fort instructif sur les évènements du site quirksmode.org, je viens finalement de trouver La solution qui me convient parfaitement :

- détection du browser
- si IE => on utilise les events mouseenter / mouseleave
- sinon => on utilise les events mouseover / mouseout

Tout bête quoi..

Un grand merci aux participants !! :king:
+