Javascript 悬停下一个/上一个元素

我需要能够使用下一个元素/上一个元素来更改当前元素的背景色。我该怎么做呢。我正在处理的元素是TR、table row和nextSibling，previousSibling没有为我做这件事，不知道为什么？

使用jQuery，您可以应用hover（）函数，并为下一行和上一行设置具有适当背景色的类。移出一行将删除这些行中的高光。可以肯定的是，在将highlight类应用于任何行之前，您需要在整个表上重置highlight类

$('tr').hover(
     function() {
        var $this = $(this);
        $this.closest('table').find('tr').removeClass('highlight');
        $this.next('tr').addClass('highlight');
        $this.prev('tr').addClass('highlight');
        $this.addClass('highlight');
     },
     function() {
        var $this = $(this);
        $this.next('tr').removeClass('highlight');
        $this.prev('tr').removeClass('highlight');
        $this.removeClass('highlight');
     }
});

这取决于这个CSS片段

.highlight {
    background-color: #ff8; /* or whatever color you choose */
}

---

我认为我们这里有一个例子，即使是“好”的浏览器也会以一种极其恼人的方式运行

以我的下表为例，其中HTML如下所示：

<table border="1">
    <thead>
    <tr id="header">
        <th>eng</th>
        <th>deu</th>
        <th>spa</th>
    </tr>
    </thead>
    <tbody>
    <tr id="row1">
        <td>one</td>
        <td>eins</td>
        <td>uno</td>
    </tr>
    <tr id="row2">
        <td>spoon</td>
        <td>der Löffel</td>
        <td>la cucharita</td>
    </tr>
    </tbody>
</table>

// my input command
document.getElementById("row1").nextSibling.nextSibling;
// output from the console
<tr id="row2">

英格
氘
温泉
一
埃因斯
联合国组织
勺子
德洛菲尔酒店
拉库查里塔酒店

当我在Firefox中打开它并转到控制台并运行以下代码段时，请注意nextSibling的行为：

// My input command
document.getElementById("row1").nextSibling;
// Output from the console
<TextNode textContent="\n ">

//我的输入命令
document.getElementById（“第1行”）.nextSibling；
//来自控制台的输出

我在某个地方读到过这篇文章，但我忘记了确切的位置（Quirksblog，或者PPK的一次演讲），所以我尝试了以下方法：

<table border="1">
    <thead>
    <tr id="header">
        <th>eng</th>
        <th>deu</th>
        <th>spa</th>
    </tr>
    </thead>
    <tbody>
    <tr id="row1">
        <td>one</td>
        <td>eins</td>
        <td>uno</td>
    </tr>
    <tr id="row2">
        <td>spoon</td>
        <td>der Löffel</td>
        <td>la cucharita</td>
    </tr>
    </tbody>
</table>

// my input command
document.getElementById("row1").nextSibling.nextSibling;
// output from the console
<tr id="row2">

//我的输入命令
document.getElementById（“行1”）.nextSibling.nextSibling；
//来自控制台的输出

这是我们出色的标准兼容浏览器（IMHO）完全错误的时刻之一

为了进行测试，我决定将我的表的HTML单行，因此（希望它在一行中显示所有内容）：

Löffella cucharita公司

然后再次运行我的测试：

// Hmmm, does nextSibling work _as expected_ now?
document.getElementById("row1").nextSibling;
// yep
<tr id="row2">

//Hmmm，下一个屏蔽现在能按预期工作了吗？
document.getElementById（“第1行”）.nextSibling；
//是的

Benice，你的想法是正确的，但是你被我认为是浏览器的一个实现疏忽所影响。我建议在跨浏览器处理HTML DOM关系时要非常小心。它们中的大多数都能按预期工作，但有时不能

---

啊，终于找到了一篇关于这方面的文章：

你能给我们看看你正在使用的代码吗？下一个和上一个兄弟姐妹应该在TR上工作，你能发布一些代码来获得更多信息吗？如果您在TD上设置了背景，那么TR将无法正确显示背景颜色。很抱歉，响应太晚，我让它工作了，是dom实现让我工作了，我要做的是继续寻找下一个/上一个元素，直到我得到一个实际的元素，而不是文本节点，通过查看节点的类型，我做到了这一点。谢谢继续，当我说Benice的想法是正确的时，我应该说我相信我对他所做的假设是正确的，因为我还没有看到他的代码。