改变高度而不影响其他元素

Question

如何在 li 元素悬停时更改它的高度而不影响其他 li 元素，例如位置，但我希望悬停 li 到与下面的其他人重叠，就像它具有最大的 z-index。

在此 jsfiddle example 中，我想更改高度但不将任何元素移动到悬停的 li 元素下方。

Answer 1

您可以使用边距来补偿高度变化。

ul.products li {
  width: calc(25% - 12.5px);
 display: inline-block;
  transition: box-shadow .15s ease;
  background-color: #fff;
  padding-bottom: 50px;
 margin:0 10px 10px 0;
 text-align: center;
  height:50px;
  margin-bottom: 30px;
}
ul.products li:hover {
  height:70px;
  margin-bottom: 10px;
}

<ul class="products">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

在正常设置中，高度为 50px，底部边距为 10px。在上面的示例中，我将额外的 20px 添加到原始 margin-bottom（总共 30px），并将悬停 margin-bottom 设置为 10px，将高度设置为 70px。

这样一来，总高度将始终为 80 像素（含边距），您可以毫无问题地移动 li 高度。

编辑： @Mr Lister's method 实际上更接近您的初衷，因为它使悬停的 li 与下面的其他 li 项目重叠.当我编辑它时，我误解了 'greater z-index' 在你未经编辑的原始问题中的意思。抱歉。

改变高度而不影响其他元素

Change height without effect on other elemetns

css

height

html-lists