悬停下一个/上一个元素

Question

我需要能够使用下一个元素/上一个元素来更改当前元素的背景颜色。 我怎么做。 我正在工作的元素是TR，表行和nextSibling，previousSibling对我来说不可行，不知道为什么吗？

Answer 1

我认为我们这里有一个例子，即使是“好”的浏览器也表现得非常烦人。

以我的下表为例，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>

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

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

我已经在某处读到了有关此内容的文章，却忘记了确切的位置（Quirksblog，或者可能是PPK的谈话），因此我尝试了以下操作：

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

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

为了测试，我决定将表格的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>

并再次运行我的测试：

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

Benice，您的想法是正确的，但是您对我想作为浏览器方面的实施监督感到有些困惑。 我建议对跨浏览器的HTML DOM关系要非常小心。 他们中的大多数人都按预期工作，但有时却没有。

啊，毕竟找到了关于此的文章： https : //developer.mozilla.org/en/Whitespace_in_the_DOM

Answer 2

使用jQuery，您可以应用hover（）函数并为下一行和上一行设置具有适当背景颜色的类。 离开行会从这些行中删除突出显示。 可以肯定的是，在将突出显示类应用于所有行之前，需要对其进行重置。

$('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 */
}