Javascript 鼠标悬停事件以更改TD背景和文本

当用户的鼠标移动到第一个提到的td上时，我需要将td背景更改为灰色，并在另一个td中显示文本

到目前为止，我已经做到了：

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

但这只会改变第一个td的背景，而不会改变第二个td的文本

有什么想法吗？

看看这个：

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一个id，并从onmouseover事件处理程序访问它。也许你应该把onmouseover代码放到它自己的函数中，并从onmouseover调用它。

你应该使用CSS

：hover

在鼠标上方更改样式。'changes the background of the first td'：因为这正是代码所做的，更改IE7中一个只适用于严格doctype的

td

：-）@Andy E:的背景。@Saul:没有太多理由不使用严格doctype。CSS

：hover

仍然可以在禁用JavaScript的情况下工作。Nivas，这是我的问题。我只知道如何改变一个td的背景。但是如果我把鼠标移到一个td上，我希望它的背景和另一个td的文本一样改变change@C.：你有错误吗？因为它在我的演示中起作用，正如你所看到的。不，我没有得到一个错误。真奇怪。它只是没有进入function@C.：您的意思是演示对您不起作用，还是在您的代码中不起作用？您在哪个浏览器中测试？这就是我尝试的，但不幸的是，我似乎无法让它工作

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

td:hover {
    background-color: red;          
}

td:hover + td {
    color: red;   
}