Question

当用户的鼠标移过第一个提到的td时，我需要将td背景更改为灰色，并将文本更改为另一个td。

到目前为止我已经这样做了：

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

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

请问任何想法？

Answer 1

看看这个：

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

请注意，在HTML中添加事件处理程序不被视为良好做法。

Depending on which browser you want to support（它肯定不会在IE6中运行），你真的应该考虑即使JS被关闭也会有效的CSS方法。代码少得多，将这种行为添加到多个元素会更容易：

td:hover {
    background-color: red;          
}

td:hover + td {
    color: red;   
}

DEMO

Answer 2

你应该给那个其他td一个id并从你的onmouseover事件处理程序访问它。也许您应该将该onmouseover代码放入其自己的函数中并从onmouseover调用它。

MouseOver事件更改TD背景和文本

2 个答案: