Evento de MouseOver para cambiar el fondo y el texto de TD

Question

Necesito cambiar el fondo de td a gris y enviar el texto en otra td cuando el mouse del usuario pasa por encima del primer td mencionado.

he hecho esto hasta ahora:

<td onMouseOver="this.style.background='#f1f1f1'" onMouseOut="this.style.background='white'"> 

pero esto sólo cambia el fondo de la primera td y no cambia el texto de la segunda td

alguna idea por favor?

Answer 1

Tener un vistazo a esto:

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')" > 

DEMO

Tenga en cuenta que la adición de controlador de eventos en el HTML no se considera como una buena práctica.

---

Depending on which browser you want to support (que sin duda no va a funcionar en IE6), que realmente debería considerar el enfoque CSS que funcionará incluso si JS está apagado. Es mucho menos código y será más fácil para agregar este comportamiento a múltiples elementos:

td:hover { 
    background-color: red;   
} 

td:hover + td { 
    color: red; 
} 

DEMO

Answer 2

Debe dar ese otro td un id y acceder a ella desde el controlador de eventos onmouseover. Tal vez deberías poner ese código onmouseover en su propia función y llamarlo desde onmouseover.