悬停effects others in table
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了悬停effects others in table相关的知识,希望对你有一定的参考价值。
我做了一个基本信息的表格,每个奇数和偶数行都有不同的颜色。在:hover
效果它是橙色,无论它是偶数还是奇数。
但当我想“组合”3 <tr>
时,我发现了一个问题。我试图将它包装到<div>
但它没有用。我的目标是:当你将3行中的1行悬停时,它会对所有这些行应用悬停效果。我设法在所有行上应用悬停效果,但前提是你悬停第一个,因为它是相邻的兄弟和一般兄弟选择器。有什么方法可以反过来吗?
如果你将第二行或第三行悬停在第三行(总共第四和第五行),你会更清楚地说明我试图描述的内容。
谢谢你的回答。
.vyjimka {
background-color: rgba(237, 234, 235, 0.2)!important;
}
.vyjimka:hover {
background-color: #ffa768!important;
}
#SlouceneBunky:hover+.vyjimka {
background-color: #ffa768!important;
}
#SlouceneBunky:hover~.vyjimka2 {
background-color: #ffa768!important;
}
tr:nth-child(odd):hover {
background-color: #ffa768;
}
tr:nth-child(odd) {
background-color: blue;
}
tr:nth-child(even) {
background-color: rgba(237, 234, 235, 0.2);
}
tr:nth-child(even):hover {
background-color: #ffa768;
}
td:nth-child(3) {
width: 200px;
}
<table>
<tr>
<th>Služba</th>
<th>Popis</th>
<th>Cena</th>
<th>Platba</th>
</tr>
<tr>
<td>Something</td>
<td>Text 1 </td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
<tr>
<td>Something</td>
<td>Text 1 </td>
<td>Text 2</td>
<td>Text 2</td>
</tr>
<tr id="SlouceneBunky">
<td rowspan="3">Something</td>
<td>Text 1 </td>
<td>Text 2 </td>
<td rowspan="3">Text 3</td>
</tr>
<tr class="vyjimka">
<td>Text 1 </td>
<td>Text 2</td>
</tr>
<tr class="vyjimka2">
<td>Text 1 </td>
<td>Text 2 </td>
</tr>
</table>
答案
您可以使用<tbody>
标记对表行进行分组:
tbody:hover tr {
background-color: #ffa768;
}
tbody:nth-child(odd) {
background-color: blue;
}
tbody:nth-child(even) {
background-color: rgba(237, 234, 235, 0.2);
}
td:nth-child(3) {
width: 200px;
}
<table>
<tbody>
<tr>
<th>Služba</th>
<th>Popis</th>
<th>Cena</th>
<th>Platba</th>
</tr>
</tbody>
<tbody>
<tr>
<td>Something</td>
<td>Text 1 </td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Something</td>
<td>Text 1 </td>
<td>Text 2</td>
<td>Text 2</td>
</tr>
</tbody>
<tbody>
<tr id="SlouceneBunky">
<td rowspan="3">Something</td>
<td>Text 1 </td>
<td>Text 2 </td>
<td rowspan="3">Text 3</td>
</tr>
<tr class="vyjimka">
<td>Text 1 </td>
<td>Text 2</td>
</tr>
<tr class="vyjimka2">
<td>Text 1 </td>
<td>Text 2 </td>
</tr>
</tbody>
</table>
以上是关于悬停effects others in table的主要内容,如果未能解决你的问题,请参考以下文章
[Effective JavaScript 笔记] 第12条:理解变量声明提升
关于computed使用时报no-side-effects-in-computed-properties错误