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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 ou dois-je implémenter une meilleure gestion de mes évènements (propagation etc..) ??