表 tr:hover 边框更改的问题

Posted 2023-03-06

【中文标题】表 tr:hover 边框更改的问题

【英文标题】：Problem with table tr:hover border change

【发布时间】：2021-10-25 15:43:14

【问题描述】：

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

任务：对于表格 tr:hover，以不同的颜色显示边框顶部和边框底部，以便在视觉上突出显示该行。

问题：使用 tr:hover 只会改变边框底部的颜色。

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

问题似乎是浏览器首先全局处理所有边框顶部，然后所有边框底部。 tr:hover 边界顶部被正常的边界底部覆盖。 !important 也不能​​解决问题。

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

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

边框顶部 右边框 边框底部 左边框

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

所以如果你有一个 :hover 边框顶部和一个正常的边框底部，那么 :hover 边框顶部将被正常的边框底部覆盖。疯了。

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>

【参考方案1】：

使用tr:hover td 而不是tr:hover。边框应用于单元格而不是行。

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

【讨论】：

这仅适用于我的示例，不适用于“设置单元格样式”规则：jsfiddle.net/qnsu5j7k 现在左边框和右边框列存在真正的问题。我也在为 col 边界寻找一个理想的解决方案。似乎有冲突，我不想通过欺骗来解决。