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

Question

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

这里是示例：https://jsfiddle.net/j4nwdju6/

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

Answer 1

您可以通过调整悬停状态的顶部和底部边距来抵消这一点：

JS fiddle

.row:hover {
    background: yellow;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: -1px 0;
}

Answer 2

为行添加边框，使其在悬停时不会跳跃

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

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

Answer 3

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

Answer 4

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

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

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

更新

要删除黑白行添加 margin-top:-2px 。检查这个fiddle。