Table border color with hover

user_555222 0
Viewed 31

How to make td border color work properly with :hover?

When you hover the last row the bottom border color is not changing as expected

.list{
    table-layout:fixed;
    border-spacing:0;
}

.list-tr:hover > td{
    border-color:red;
}

.list-tr:hover + tr > td{
    border-top-color:red;
}

.list-td{
    border-top:1px solid blue;
}

.list-tr:last-child .list-td{
    border-bottom:1px solid blue;
}
<table class="list">
<tbody>
<tr class="list-tr">
<td class="list-td">row1</td>
<td class="list-td">row1</td>
</tr>
<tr class="list-tr">
<td class="list-td">row2</td>
<td class="list-td">row2</td>
</tr>
<tr class="list-tr">
<td class="list-td">row3</td>
<td class="list-td">row3</td>
</tr>
</table>

css
2 Answers

You need to increase the specificity for the red border coloring on :hover. If you look at the style tab in the dom, you can see the .list-tr:hover > td selector is in fact applied to the last bar on :hover but that the .list-tr:last-child .list-td selector has a greater specificity.

enter image description here

Increasing the specificity of .list-tr:hover > td to .list-tr:hover > td.list-td and it works as expected. You could also lower the specificity of the :last-child selector.

.list {
  table-layout: fixed;
  border-spacing: 0;
}

.list-tr:hover > td.list-td { /* increase specificity */
  border-color: red;
}

.list-tr:hover + tr > td {
  border-top-color: red;
}

.list-td {
  border-top: 1px solid blue;
}

.list-tr:last-child .list-td {
  border-bottom: 1px solid blue;
}
<table class="list">
  <tbody>
    <tr class="list-tr">
      <td class="list-td">row1</td>
      <td class="list-td">row1</td>
    </tr>
    <tr class="list-tr">
      <td class="list-td">row2</td>
      <td class="list-td">row2</td>
    </tr>
    <tr class="list-tr">
      <td class="list-td">row3</td>
      <td class="list-td">row3</td>
    </tr>
</table>

Pointer

When applying colors conditionally like this it's easier to first apply the main styles regardless of color (i.e. border), then add the colors in the successive selectors. For example...

.border {
  border: 1px solid black; /* set base color */
}

.red {
  border-color: red;
}

.green {
  border-color: green;
}

This doesn't really apply to you example but good rule of thumb. This also applies to other color variant-styles or styles with multiple values in general.

user_69435870

Add another rule for the last border

.list{
    table-layout:fixed;
    border-spacing:0;
}

.list-tr:hover > td{
    border-color:red;
}

.list-tr:hover + tr > td{
    border-top-color:red;
}

.list-td{
    border-top:1px solid blue;
}

.list-tr:last-child .list-td{
    border-bottom:1px solid blue;
}
.list-tr:last-child:hover .list-td{
    border-bottom:1px solid red;
}
<table class="list">
<tbody>
<tr class="list-tr">
<td class="list-td">row1</td>
<td class="list-td">row1</td>
</tr>
<tr class="list-tr">
<td class="list-td">row2</td>
<td class="list-td">row2</td>
</tr>
<tr class="list-tr">
<td class="list-td">row3</td>
<td class="list-td">row3</td>
</tr>
</table>

user_86203330
Related