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

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

你在寻找什么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/