将 table 行突出显示更改为白色边框

Question

我想问一下是否可以更改 CSS 以便 table 行在悬停在它们上方时不会以颜色突出显示 - 但只有白色边框？

CSS如下：

<style>
body {
    background-color: #0D0D0D;
}

tr:hover{
    background: grey;
    }


tr:hover td{
  background: transparent !important;
}



</style>

这里是完整的table： https://jsfiddle.net/aqjccpvx/

Answer 1

已更新 fiddle：https://jsfiddle.net/aqjccpvx/1/

将此添加到您的 css 规则中：

tr:hover{
  background: #403151;
  border: 1px solid white;
}

编辑：如果你想在悬停时修复移动的行替换这个：

border: 1px solid white;

有：

outline: 1px solid white;

已修复 fiddle：https://jsfiddle.net/aqjccpvx/4/

Answer 2

当然可以：

只需将您的 css 更改为：

tr:hover{
  border: 1px solid white;
}


tr:hover td{
  background: #403151;
}

将 table 行突出显示更改为白色边框

Change table row highlighting to white border

html

css

css-tables