悬停 effects other s in table

Question

我做了一个基本信息的表格，每个奇数和偶数行都有不同的颜色。在:hover效果它是橙色，无论它是偶数还是奇数。

但当我想“组合”3 <tr>时，我发现了一个问题。我试图将它包装到<div>但它没有用。我的目标是：当你将3行中的1行悬停时，它会对所有这些行应用悬停效果。我设法在所有行上应用悬停效果，但前提是你悬停第一个，因为它是相邻的兄弟和一般兄弟选择器。有什么方法可以反过来吗？

Look at the jsfiddle

如果你将第二行或第三行悬停在第三行（总共第四和第五行），你会更清楚地说明我试图描述的内容。

谢谢你的回答。

.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>

Answer 1

您可以使用<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>