当用户的鼠标悬停在第一个td上时,我需要将该td的背景更改为灰色,并更改另一个td中的文本。
目前我已经完成了以下工作:
<td onMouseOver="this.style.background='#f1f1f1'" onMouseOut="this.style.background='white'">
但这只改变了第一个td的背景,并没有改变第二个td中的文本。有什么想法吗?
当用户的鼠标悬停在第一个td上时,我需要将该td的背景更改为灰色,并更改另一个td中的文本。
目前我已经完成了以下工作:
<td onMouseOver="this.style.background='#f1f1f1'" onMouseOut="this.style.background='white'">
看一下这个:
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;
}
:hover
жқҘж”№еҸҳйј ж ҮжӮ¬еҒңж—¶зҡ„ж ·ејҸгҖӮ - Andy E:hover
仍然有效。 - Andy E