html - 悬停 <tr> 会影响表格中的其他 <tr>

标签 html css html-table

我制作了一个包含基本信息的表格,每个奇数行和偶数行都有不同的颜色。在 :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>

最佳答案

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

关于html - 悬停 <tr> 会影响表格中的其他 <tr>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49067486/

相关文章:

html - 滚动时修复表格标题

html - 管理内联列表项之间空白的最佳方式

css - Elementor 更改按钮悬停在列上的部分图像

javascript - 适合他的内容的响应式居中弹出窗口

css - 在桌面上使用 CSS 将 svg 文本路径居中时遇到问题

html - 是否可以将 html 表单元素包装在多个表单标签中?

html - 位置 :sticky div not sticky at the bottom of the screen

javascript - Bootstrap 模态目标内容未显示在模态主体中

html - CSS:如何设置表格背景的样式,包括 <caption> 元素

html - 如何滚动具有可变数量的行和列的表