Événement MouseOver pour changer de TD de fond et de texte

Ont un coup d'oeil à ceci:

function highlightNext(element, color) {
    var next = element;
    do { //find next td node
        next = next.nextSibling;
    }
    while (next && !('nodeName' in next && next.nodeName === 'TD'));
    if (next) {
        next.style.color = color;
    }
}

function highlightBG(element, color) {
    element.style.backgroundColor = color;
}

HTML:

<td onMouseOver="highlightBG(this, 'red');highlightNext(this, 'red')" 
    onMouseOut="highlightBG(this, 'white');highlightNext(this, 'black')" >

DÉMO

Remarque que l'ajout du gestionnaire d'événement dans le HTML n'est pas considéré comme une bonne pratique.

---

Selon le navigateur que vous souhaitez soutenir (il ne fonctionnera certainement pas dans IE6), vous devriez vraiment prendre en compte le CSS approche qui fonctionne même si le JS est désactivé. Est beaucoup moins de code et il sera plus facile d'ajouter ce comportement à de multiples éléments:

td:hover {
    background-color: red;          
}

td:hover + td {
    color: red;   
}

DÉMO

OriginalL'auteur Felix Kling