添加边框而不更改块的高度

Question

我有一些基于div的表格。当表行悬停时，我想在其顶部和底部添加边框。但是，尽管box-sizing: border-box，我的块变大了2个像素。行不能有固定的高度。

以下是示例：https://jsfiddle.net/j4nwdju6/

我不能只添加不可见或透明边框，因为它会在行之间产生空白。

Answer 1

您可以像这样在.row添加透明边框

.row {    
display: flex;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}

这不会影响悬停时div的高度。

<强>更新

要删除空格，请在行中添加margin-top:-2px。请检查此fiddle。

Answer 2

为您的行添加边框，以便在悬停时不会跳转

.row {    
    display: flex;
    border:1px solid white;
}

更新了小提琴：https://jsfiddle.net/j4nwdju6/1/

Answer 3

一个非常简单的黑客方法是将margin-top: -2px;添加到:hover个样式，这样位置就不会改变：JSFiddle。