Question

如果li元素悬停在不影响其他li元素（如位置）的情况下，如何更改li元素的高度，但我希望悬停的li重叠下面的其他人，比如它有最大的z指数。

在此jsfiddle example中，我希望更改高度，但不要移动悬停的java.lang.IllegalStateException: Couldn't read row 0, col -1 from CursorWindow. Make sure the Cursor is initialized correctly before accessing data from it.元素下方的任何元素。

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

修改 @Mr Lister's method实际上更接近您的初衷，因为它使悬停的li与下面的其他li项重叠。我误解了你在原始未经编辑的问题中的意思是更大的z-index＆＃39;当我编辑它。道歉。

改变高度而不影响其他elemet

1 个答案: