MouseOver event to change TD background and text

Question

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?

You should use CSS `:hover` for changing styles on mouse over. — Andy E, Feb 04 '11 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, Feb 04 '11 at 12:08
@Saul: there aren't many reasons not to use a strict doctype. CSS `:hover` still works with JavaScript disabled. — Andy E, Feb 04 '11 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.., Feb 04 '11 at 12:23
@C.: So you want to change the background color of the hovered `td` and the text color of the next `td`? Is that correct? — Felix Kling, Feb 04 '11 at 12:32
Only do this this.style.backgroundColor='#FFFFFF' (three years later, so i hope you solved it :DDD ) — Tony, Nov 10 '14 at 19:24

Felix Kling · Accepted Answer · 2011-02-04T14:56:26.837

10

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

edited Feb 04 '11 at 14:56

answered Feb 04 '11 at 12:31

Felix Kling

795,719
175
1,089
1,143

@C.: Do you get an error? Because it works in my demo as you can see. – Felix Kling Feb 04 '11 at 15:21
no i did not get an error. it is strange. it just ddnt enter the function – C.. Feb 04 '11 at 17:05
@C.: You mean the demo does not even work for you or does it not work in your code? In which browser are you testing? – Felix Kling Feb 04 '11 at 17:07

score 0 · Answer 2 · answered Feb 04 '11 at 12:49

0

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.

answered Feb 04 '11 at 12:49

nokul

572
2
10

thats what im trying but unfortunately I can't seem to get it working – C.. Feb 07 '11 at 07:57

MouseOver event to change TD background and text

2 Answers2

Linked