html - div元素悬停时如何删除多余的空间？

Question

我想在这里实现的是当用户悬停在每个“.child”元素上然后转换比例并显示“.toggle”元素但保持同级元素的高度。问题是兄弟元素扩展并在下图中显示了空白空间。纯CSS如何实现？

见代码沙盒演示

更新：我现在通过在悬停时添加内部 div 包装器元素解决了这个问题，内部将是绝对位置。

Answer 1

如果您只想保持兄弟元素的高度，请添加此 CSS

.parent {
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

但是，您仍然可以看到红色背景。为此，您需要使用位置设置“.toggle”div。