悬停下一个/前一个元素

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 */ 
}