表格 tr 的问题：悬停边框更改

Question

在 Firefox 91.0.2（64 位）Windows 7 中测试。

任务：对于表 tr:hover，以不同的颜色显示 border-top 和 border-bottom，以便该行在视觉上突出显示。

问题：使用 tr:hover 时，仅更改边框底部的颜色。

我没有在已经存在的问题中找到解决方案，因为这些问题大多没有使用 td 背景颜色。由于在我的例子中使用了 td 背景颜色，因此边框透明度的技巧并不能解决问题。单元格间距也不能解决问题。

问题似乎是浏览器首先全局处理所有 border-top，然后处理所有 border-bottom。 tr:hover border-top 被正常的 border-bottom 覆盖。而且 !important 并不能解决问题。

col border-right 和 border-left 也存在同样的问题。不过，没有 :hover active，所以这个问题可以更容易解决，不是这里的主题。包含它只是为了显示覆盖 CSS 规则的问题。

似乎并不是每个CSS规则都是单独处理的，而是按照以下顺序全局收集和处理的：

• 顶部边框
• 右边界
• 底部边框
• 左边框

当两者重叠时，就像在表格中一样，下面的内容会覆盖前面的内容，即使使用 :hover!这就是问题所在。

因此，如果您有一个 :hover border-top 和一个普通的 border-bottom，那么 :hover border-top 将被普通的 border-bottom 覆盖。疯了。

https://jsfiddle.net/8fh3nao6/5/

table {
  border-collapse: collapse;
  text-align: right;
  cursor: default;
}
th {
  background: #ccc;
  text-align: center;
}
.col0 {
  background: #ddd;
}
col {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}
.col2 {
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}
tr {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
tr:hover {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.c0 {
  background: #fff;
}
.c1 {
  background: #f8a;
}
.c2 {
  background: #b3c;
}
.c3 {
  background: #aa6;
}
.c4 {
  background: #cf9;
}
.c5 {
  background: #9dd;
}
.c6 {
  background: #0f8;
}
.c7 {
  background: #44f;
}
.c8 {
  background: #88b;
}

<table>
    <colgroup>
    <col class="col0">
    <col class="col1">
    <col class="col2">
    <col class="col3">
  </colgroup>
    <thead>
    <tr>
        <th>ID</th>
        <th>COL 1</th>
        <th>COL 2</th>
        <th>COL 4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td class="c0"></td>
        <td class="c0"></td>
        <td class="c5">8,36</td>
    </tr>
    <tr>
        <td>2</td>
        <td class="c1">95,35</td>
        <td class="c3">36,25</td>
        <td class="c6">45,38</td>
    </tr>
    <tr>
        <td>3</td>
        <td class="c2">37,25</td>
        <td class="c4">15,24</td>
        <td class="c8">41,25</td>
    </tr>
    <tr>
        <td>4</td>
        <td class="c7">97,64</td>
        <td class="c3">28,73</td>
        <td class="c0">36,94</td>
    </tr>
    </tbody>
</table>

Answer 1

使用

tr:hover td

而不是

tr:hover

。边框应用于单元格而不是行。

如果您还应用背景颜色，我建议您这样做，设置行中单元格的样式，而不是行本身。

Answer 2

为了让它在我的应用程序中工作，我需要在

<tr>

周围设置悬停边框，我需要设置

tr:hover

样式和

tr:hover td

样式。我下面的代码片段还更改了悬停时的行颜色。

// This handles the border around the row
tr:hover {
  border-color: #0CA2BF;
}

// This handles the top border for rows other than the
// first and changes the row color.
tr:hover td {
  border-top-width: 2px;
  border-top-color: #0CA2BF;
  color: #0CA2BF;
}