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;
}
我有 table 。每两行为一组。这些组交替使用背景颜色。第一行和第二行是白色的。第 3 行和第 4 行是灰色的。第 5 行和第 6 行是白色的。等等
当您将鼠标悬停在一组上时,我想将背景颜色设置为黄色。我该怎么做?
最佳答案
您正在寻找的是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;
}
关于css - 将 this + 悬停在 this (n+1) 之后和之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14553122/