根据悬停的子元素设置不同的父元素样式

【问题标题】：Style parent element differently depending on which child element is hovered | CSS根据悬停的子元素设置不同的父元素样式 | CSS
【发布时间】：2021-03-02 09:06:00
【问题描述】：

我正在部分使用解决方案来解决不久前提出的this 问题。

我说部分因为这个解决方案似乎只有在你想基于 one 子元素设置父元素 one 的样式时才有效.当您有两个或多个子元素（元素）时，如下所示，并且您希望第一个子元素为父元素设置一种颜色，而第二个子元素为父元素设置另一种颜色；使用pointer-events 似乎失败了。

在下面的 gif 中，head 很好地悬停，因为子元素选择了它后面的 table 父元素并为背景的一部分着色以匹配它的颜色。然而，所有其他元素（ body 和 foot ）在悬停时看起来都不一致。什么是唯一的 CSS 解决方案？

注意 body 和 foot 元素如何无法更改 table 背景以匹配其颜色。期望的行为是悬停在顶部的 head 元素的行为。

悬停在孩子们身上：

thead th:first-child, tbody td:first-child {
  border-top-left-radius: 1rem;
}
thead th:last-child, tbody td:last-child {
  border-top-right-radius: 1rem;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1rem;
}
thead th {
  background-color: #666;
}
tbody td {
  background-color: #aaa;
}
tfoot td {
  background-color: #eee;
}
thead th:hover {
  background-color: #333;
}
tbody td:hover {
  background-color: #888;
}
tfoot td:hover {
  background-color: #ccc;
}

<style>
  html, body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 1.22rem;
    text-align: center;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
    pointer-events: auto;
  }
  table {
    width: 10rem;
    margin: auto;
    padding: 0;
    background-image: linear-gradient( 
      transparent 20%, #666 20% 46.5%, #eee 46.5% 70%, transparent 70% 100%
    );  
    pointer-events: none;
  }  
  table:hover {
    background-image: linear-gradient( 
      transparent 20%, #333 20% 46.5%, #eee 46.5% 70%, transparent 70% 100%
    );  
  }  
</style>
<table>
  <thead> <tr> <th>head</th> </tr> </thead>
  <tbody> <tr> <td>body</td> </tr> </tbody>
  <tfoot> <tr> <td>foot</td> </tr> </tfoot>
</table>

编辑：我保持代码简短，以便更容易看到发生了什么。如果我以错误的方式解决这个问题并且他们是一种更简单的方法（比如重新排列我的 HTML 并更改我的所有 CSS）以获得所需的结果；我也对此持开放态度。

【问题讨论】：

标签： html css html-table css-selectors hover

【解决方案1】：

提供父表overflow: hidden，删除所有pointer-event 样式并在悬停时在表格单元格本身上使用box-shadow 似乎可以解决所有问题。

thead th:first-child, tbody td:first-child {
  border-top-left-radius: 1rem;
}
thead th:last-child, tbody td:last-child {
  border-top-right-radius: 1rem;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1rem;
}
thead th {
  background-color: #666;
  position: relative;
}
tbody td {
  background-color: #aaa;
  position: relative;
}
tfoot td {
  background-color: #eee;
}
thead th:hover {
  background-color: #333;
}
tbody td:hover {
  background-color: #888;
}
tfoot td:hover {
  background-color: #ccc;
}

<style>
  html, body {
    margin: 0; padding: 0;
    font-family: Arial; font-size: 1.22rem;
    text-align: center;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
  }
  table {
    overflow: hidden;
    width: 10rem;
    margin: auto;
    padding: 0;
    background-image: linear-gradient( 
      transparent 20%, #666 20% 46.5%, #eee 46.5% 70%, transparent 70% 100%
    );  
  }  
  table:hover {
    background-image: linear-gradient( 
      transparent 20%, #666 20% 46.5%, #eee 46.5% 70%, transparent 70% 100%
    );  
  }  
  thead th:hover { box-shadow: #333 0 0.75rem 0 0.25rem; }  
  tbody td:hover { box-shadow: #666 0 -0.75rem 0 0.25rem; }
  tfoot td:hover { box-shadow: #ccc 0 -0.75rem 0 0.25rem; }  
</style>
<table>
  <thead> <tr> <th>head</th> </tr> </thead>
  <tbody> <tr> <td>body</td> </tr> </tbody>
  <tfoot> <tr> <td>foot</td> </tr> </tfoot>
</table>

【讨论】：