鼠标悬停事件改变TD的背景和文本

Question

当用户的鼠标悬停在第一个td上时，我需要将该td的背景更改为灰色，并更改另一个td中的文本。

目前我已经完成了以下工作：

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

但这只改变了第一个td的背景，并没有改变第二个td中的文本。有什么想法吗？

- C..

---

дҪ еә”иҜҘдҪҝз”ЁCSSзҡ„:hoverжқҘж”№еҸҳйј ж ҮжӮ¬еҒңж—¶зҡ„ж ·ејҸгҖӮ - Andy E

更改第一个td的背景，因为这正是代码要做的事情，为一个td更改背景 :-) - Nivas

@Andy E: 在IE7中，只有使用严格的文档类型才能正常工作。 - Saul

@Saul：没有太多理由不使用严格的文档类型。即使禁用JavaScript，CSS的:hover仍然有效。 - Andy E

只需执行此操作 this.style.backgroundColor='#FFFFFF' （三年后，希望您已经解决了它 :DDD） - Tony

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')" >

演示

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

---

根据您想要支持的浏览器（它肯定不能在IE6中工作），您真的应该考虑使用CSS方法，即使JS被关闭也能够工作。这种方法代码更少，并且更容易将此行为添加到多个元素中：

td:hover {
    background-color: red;          
}

td:hover + td {
    color: red;   
}

演示

- Felix Kling

---

@C：你有收到错误吗？因为在我的演示中它是可以工作的，你可以看到。 - Felix Kling

没有，我没有收到错误信息。很奇怪，它只是没有进入函数。 - C..

@C：你的意思是演示对你来说甚至都无法工作，还是它在你的代码中不起作用？你正在测试哪个浏览器？ - Felix Kling

Answer 2

你应该给另一个td一个id，并从你的onmouseover事件处理程序中访问它。也许你应该把那个onmouseover代码放到它自己的函数中，并从onmouseover中调用它。

- nokul

---

这就是我正在尝试的，但不幸的是似乎无法让它工作。 - C..