在 tr 上使用 :hover 时出现 CSS 边框问题答案

【问题标题】：CSS border issues when using :hover on the tr在 tr 上使用 :hover 时出现 CSS 边框问题
【发布时间】：2011-07-27 15:13:15
【问题描述】：

我试图在数据表中突出显示鼠标所在的行。我正在尝试使用边框顶部和边框底部来做到这一点。为了提高可读性，我还在交替行上有一个浅色透明 png。

似乎当我打开和关闭边框（在 IE8+ 和 FF 中工作）时，行会跳动一点。我想我可以通过有一个非悬停透明边框来解决它，而不是根本没有。这个 x 浏览器现在兼容吗？

在 Chrome 中，当您将鼠标移出该行时，突出显示的行的边框不会消失，为什么？

http://justinzaun.com/Tree/people/

更新：我已经修复了 chrome 中它们不会消失的边框问题。我将边界移至 TD 而不是 TR。不过，这些行仍在跳来跳去。

谢谢！

【问题讨论】：

在 Chrome 中（对我而言）当我向下移动时边框会消失，但当我向上移动页面时不会。
@w3d - 我已经解决了这个问题，只是行在问题左侧移动

标签： css

【解决方案1】：

在您的正常状态元素上放置透明边框。

当应用:hover 时，边框的大小会改变元素占用的大小。

例如：

.myelement
{
        border:4px solid transparent;
}

.myelement:hover
{
    border: 4px solid green;
}

http://jsfiddle.net/mPmRA/

编辑：-更具体到您的表格（呃：表格...折叠边框使上述内容无法正常工作）

http://jsfiddle.net/mPmRA/1/

将透明边框放在tr上

tr
{
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
}

对于悬停，请执行以下操作：

tr:hover td
{
    border-top:4px solid green;
    border-bottom:4px solid green;
}

td 边框随后将出现在该行的边框上方。

【讨论】：

我尽量避免评论旧帖子，但看到我在这里已经有了“死灵法师徽章”：詹姆斯，这个近 8 年的答案仍然在解决 2019 年的问题。@987654329 的使用如今，@ 在桌子上几乎是给定的，而您提供 tr:hover td 的编辑是 gold。使用:state 感觉应该是选择器的end；添加更多细节 after :state 不是 IMO 的默认想法。太棒了，谢谢！
确保在定义中具有相同的边框样式，即在这种情况下为“实心”。在 Chromium 中粗心地混合实心和虚线对我不起作用。

【解决方案2】：

更简单的方法是添加“margin-top:-1px; margin-bottom:-1px;”到 :hover 样式，这会用边框校正新高度。

【讨论】：

嗨，Wulf，我已经更新了 CSS 以包含负边距，但行仍在跳跃。
或者，在添加边框时，可能会在默认样式中添加填充并在:hover 样式中将其移除？
+1 很棒的电话，这比在处理添加边框的悬停菜单时尝试支持 IE8 透明度要好

【解决方案3】：

确保您的边框设置为 INSIDE 而不是外部。不幸的是，边框的插入选项还不是 CSS 的一部分。下面是一些 CSS 来使用盒子阴影在元素内部制作边框：

.mytable tr:hover {
    -moz-box-shadow: inset 0 0 1px #000;
}

这将在您的元素内部创建一个 1px 的黑色边框！ :D 我希望这会有所帮助，如果您设置在黑色虚线边框上，您唯一的选择是设置绝对定位，并单独定位每个表格行，这很麻烦。：/ 如果你有相对或静态定位，当其他尺寸增加时，元素会移动。 Wulf 的想法可能需要一点配置，但老实说，盒子阴影的边框比虚线的边框要好得多。（如果我自己这么说的话有点俗气。^_^对不起。）

【讨论】：