将此+后和此(n + 1)和之前悬停

时间:2013-01-27 22:34:42

标签: css

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行是白色的。等

当您将鼠标悬停在某个组上时,我想将背景颜色设置为黄色。我怎么能这样做?

3 个答案:

答案 0 :(得分:5)

您正在寻找的是tbodytbody元素与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/

答案 1 :(得分:1)

您必须修改HTML或使用javascript。我想到了这一点,我认为答案是'不',原因有一个。

CSS中没有'previous sibling'选择器。您在示例代码中使用beforeafter,但这些pseduo选择器用于插入内容,而不是用于修改兄弟节点的CSS属性。

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

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

我考虑过使用课程,但同样缺乏先前的兄弟组合器会造成灾难。除非您为每个分组指定了一个独特的类。这将导致大量冗余的html和css。

您需要修改HTML或使用javascript。如果您可以修改HTML,我会放弃该表并使用div代替。如果你可以使用javascript,那么实现它是相对简单的。

- 编辑

我没有意识到你可以在一个表中声明多个tbody。如果你可以修改html,这肯定是要走的路。

答案 2 :(得分:0)

不确定这是否正是您正在寻找的,但这是使用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

相关问题