I need to change the td background to grey and text in another td when the user's mouse goes over the first mentioned td.

I have done this so far:

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

but this only changes the background of the first td and does not change the text in the second td.

Any ideas please?

I need to change the td background to grey and text in another td when the user's mouse goes over the first mentioned td.

I have done this so far:

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

but this only changes the background of the first td and does not change the text in the second td.

Any ideas please?

• javascript
• html
• dom-events
• onmouseover

• 1 You should use CSS :hover for changing styles on mouse over. – Andy E Commented Feb 4, 2011 at 12:07
• 'changes the background of the first td': because thats exactly what the code is doing, change the background for one td :-) – Nivas Commented Feb 4, 2011 at 12:08
• @Andy E: In IE7 that works only with a strict doctype. – Saul Commented Feb 4, 2011 at 12:10
• 1 @Saul: there aren't many reasons not to use a strict doctype. CSS :hover still works with JavaScript disabled. – Andy E Commented Feb 4, 2011 at 12:19
• Nivas, thats my problem. I only know how to change the background of one td. But if I do mouseover one td i want the background of that to change as also the text of the other td to change – C.. Commented Feb 4, 2011 at 12:23

2 Answers 2

Have a look at this:

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

Note that adding the event handler in the HTML is not considered to be good practice.

Depending on which browser you want to support (it definitely won't work in IE6), you really should consider the CSS approach which will work even if JS is turned off. Is much less code and it will be easier to add this behaviour to multiple elements:

td:hover {
    background-color: red;          
}

td:hover + td {
    color: red;   
}

DEMO

You should give that other td an id and access it from your onmouseover event handler. Maybe you should put that onmouseover code into its own function and call it from the onmouseover.