tr:hover亮度滤镜导致子元素td边框消失，如何解决？

问题原因 #

你给<tr>设置hover状态的brightness滤镜后，这个滤镜会作用于<tr>及其所有子元素——包括<td>的黑色边框。亮度降低后，原本的纯黑边框会被调暗成深灰色，视觉上就像“消失”了。另外你原生CSS里的<td>边框写法不完整：只写了宽度和颜色，缺了border-style: solid;，虽然部分浏览器会默认补全，但这是不规范的，可能导致边框在某些环境下本来就不生效。

解决方案 #

根据你的需求，有两种可行的修复方式：

方式1：用背景色替换滤镜（推荐，更简单）

如果不需要严格的亮度滤镜效果，直接给<tr>设置hover时的背景色，这样只会改变tr的背景，不会影响子元素的边框：

• 原生CSS代码：

tr:hover {
  background-color: #e5e7eb; /* 按需调整暗色调 */
}
td {
  border: 0.5px solid black; /* 补全border-style */
}

• Tailwind代码：

<tr ... className="hover:bg-gray-200">
  { row.cells.map(cell => (
    <td ... className="border-[0.5px] border-solid border-black">
      ...                  
    </td>
  ))}
</tr>

方式2：保留滤镜但隔离作用范围

如果必须使用亮度滤镜，通过伪元素实现滤镜只作用于tr的背景，不影响子元素：

• 原生CSS代码：

tr {
  position: relative;
  z-index: 0;
}
tr:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 匹配你的表格背景色 */
  filter: brightness(0.7);
  z-index: -1;
}
td {
  border: 0.5px solid black;
  position: relative; /* 确保边框在伪元素之上 */
}

• Tailwind代码：

<tr ... className="relative z-0 hover:before:content-[''] hover:before:absolute hover:before:inset-0 hover:before:bg-white hover:before:brightness-75 hover:before:-z-10">
  { row.cells.map(cell => (
    <td ... className="border-[0.5px] border-solid border-black relative">
      ...                  
    </td>
  ))}
</tr>

内容的提问来源于stack exchange，提问作者Brian Barry