Style parent element differently depending on which child element is hovered | CSS

Question

I'm partially using a solution to this question asked a while back.

I say partially because this solution only seems to work if you want to style the parent element one way based off of one child element. When you have two or more children ( elements ) like below and you want the first child to style the parent one color and the second child to style the parent element another; using pointer-events seems to fail.

In the gif below the head is hovered just fine as the child element selects the table parent behind it and colors a portion of the background to match it's color. All of the other elements however ( body and foot ) fail to look consistent when hovered. What's a CSS only solution to this?

Notice how the body and foot elements fail to change the table background to match their colors. The desired behavior is that of the head element at the top when it's hovered.

Hover the children:

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>

Edit: I kept the code short so it's easier to see what's going on. If I'm going about this the wrong way and their is an easier way ( like rearranging my HTML and changing all of my CSS ) to get the desired result; I'm open to that as well.

score 0 · Answer 1 · answered Nov 19 '20 at 05:30

Giving the parent table overflow: hidden, removing all of the pointer-event styles and utilizing box-shadow on the table cells themselves when hovered seemed to solve all issues.

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>

Style parent element differently depending on which child element is hovered | CSS

1 Answers1