Javascript 表行和列组边界问题

我有一个表（），其中有一些javascript，当鼠标悬停时，它将

hover

类应用于相应的colgroup和row。这应在表中显示为

+

，即该列高亮显示，该行显示

不幸的是，使用borders（）时，当您将鼠标移到几个单元格上（我在Chrome中查找）时，就会出现一些问题。有人知道为什么会这样吗

我已经尝试注释了

border collpase

属性，但没有成功

.hover {
    background: #f0f0f0;
    background: #f4f4f4;
}
colgroup.hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
tr.hover{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

---

注释最后两个css属性，如fiddle1所示

/*colgroup.hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
tr.hover{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}*/

---

这里有一个快速解决方案。尝试添加这些规则

colgroup {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}


tr {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

产生奇怪效果的原因是边框正在改变长方体的尺寸

通过添加白色边框（或与背景匹配的边框），您只需更改颜色，而无需更改尺寸

编辑：

---

如果愿意，可以在“悬停”下更改规则以更改边框颜色。这将消除一些冗余。

如果您这样做（请参见第二小提琴），那么在多次悬停（在屏幕上晃动鼠标）后，您将开始看到可视的人工制品，但它不起作用。将fiddle2的css替换为fiddle1，并查看@Chris