MouseOver event to change TD background and text

问题

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?

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/4897737/mouseover-event-to-change-td-background-and-text

标签

javascript

html

javascript-events

onmouseover