悬停 this + after 和 this (n+1) and before

Question

jsfiddle.net/rqJAY/

HTML：

<table class="table_database_edit">
<tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usuń</td></tr>
<tr class="more" id=""><td colspan="3">aa</td></tr>
<tr><td>test</td><td>Edytuj</td><td>Usuń</td></tr>
<tr class="more" id=""><td colspan="3">aa</td></tr>
</table>

CSS：

tr.more{
    #display: none;
}
table.table_database_edit{
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit  tr:nth-child(4n+3), table.table_database_edit  tr:nth-child(4n+4){
    background-color: #EFF0F1;
}
table.table_database_edit  tr:hover:nth-child(n) + tr:nth-child(n):after{
    background-color: #FFFFCC;
}
table.table_database_edit  tr:hover:nth-child(n+1) + tr:nth-child(n+1):before{
    background-color: #FFFFCC;
}

我有桌子。每两行是一个组。组交替背景颜色。第 1 行和第 2 行是白色的。第 3 行和第 4 行是灰色的。第 5 行和第 6 行是白色的。等等。

当您将鼠标悬停在组上时，我想将背景颜色设置为黄色。我该怎么做？

Answer 1

您必须修改 HTML 或使用 javascript。我考虑了一下，我认为答案是“不”，原因有一个。

CSS 中没有“上一个兄弟”选择器。您在示例代码中使用了before 和after，但这些pseduo-selector 用于插入内容，而不是用于修改兄弟姐妹的CSS 属性。

最近的是相邻的兄弟组合器，但它只选择下一个兄弟。有no previous sibling selector 可用。因此，您可以在超过第一行时突出显示两行，但在超过第二行时不能突出显示第一行。

http://jsfiddle.net/rqJAY/2/

我曾考虑过使用类，但再次缺少先前的兄弟组合器会带来灾难。除非你做了一些事情，比如为每个分组分配一个唯一的类。这会导致大量多余的 html 和 css。

您需要修改 HTML 或使用 javascript。如果您可以修改 HTML，我会放弃表格并改用 div。如果你可以使用 javascript，那么实现起来就比较简单了。

--编辑

我没有意识到你可以在一个表中声明多个 tbody。如果您可以修改 html，这绝对是可行的方法。

Answer 2

您正在寻找的是tbody。 tbody 元素类似于colgroup，但用于对行进行分组。从那里开始，CSS 很简单：

<table class="table_database_edit">
    <tbody>
        <tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>

    <tbody>
        <tr><td>test</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>
</table>

CSS：

tr.more{
    #display: none;
}
table.table_database_edit{
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit  tbody:nth-child(odd) tr {
    background-color: #EFF0F1;
}

table.table_database_edit  tbody:hover tr {
    background-color: #FFFFCC;
}

http://jsfiddle.net/rqJAY/13/

Answer 3

不确定这是否正是您要寻找的，但这里有一个使用 jQuery 和 CSS 的解决方案。这将是一个更好的跨浏览器解决方案，因为 CSS :nth-child 尚未被所有主流浏览器支持。

jQuery:

//Add group classes to rows
$('table.table_database_edit tr').each(function () {
    if ($('.table_database_edit tr').index($(this)) + 1 !== 1 && ($('.table_database_edit tr').index($(this)) + 1) % 4 === 0) {
        $(this).removeClass('groupOne').addClass('groupTwo');
        $(this).prev().removeClass('groupOne').addClass('groupTwo');
    } else {
        $(this).addClass('groupOne');
        $(this).next().addClass('groupOne');
    }
});

//Highlight groups of two
$('table.table_database_edit tr').hover(function () {
    if ($('.table_database_edit tr').index($(this)) === 0 || $('.table_database_edit tr').index($(this)) % 2 === 0) {
        $(this).addClass('highlight');
        $(this).next().addClass('highlight');
    } else {
        $(this).addClass('highlight');
        $(this).prev().addClass('highlight');
    }
}, function () {
    $('.table_database_edit tr').removeClass('highlight');
});

CSS：

table.table_database_edit {
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit tr.groupOne {
    background-color: #fff;
}
table.table_database_edit tr.groupTwo {
    background-color: #EFF0F1;
}
table.table_database_edit tr.highlight {
    background-color: yellow;
}

如果您需要我调整它，请告诉我！

完整解决方案：Updated JSFiddle - Unlimited Grouping