隐藏html元素但保持它们是同位素的一部分

Question

我在jquery中有没有显示的元素（div）。它们仍然在配件中有空间。我现在可以将它们过滤掉，但这似乎有其他后果

我想这有助于陈述我试图做的事情。我想在悬停时显示另一个div。除了给

的空间外，这个工作正常

display: none 

的div

悬停

这是我的代码，如果它有帮助

HTML

 <div id="item-container">
 @for (int i = 0; i < 20; i++)
 {
     <div class="item">@i</div>
     <div class="secondary">@i test</div>
 }
 </div>

CSS

#item-container .item {
  height: 40px;
  width: 40px;
  border: 1px solid red;
  background-color: grey;
}

#item-container .item:hover {
  z-index: 0;
}

#item-container .item:hover + .secondary {
  display: block !important;
  z-index: 1;
  margin-left: -11.2%;
}

#item-container .secondary {
  height: 40px;
  width: 40px;
  border: 1px solid blue;
  background-color: yellow;
  display: none;
}

Answer 1

解决这个问题的一个显而易见的方法是做一个包含我想在两者之间切换的div的父div

而不是

<div></div>
<div></div>

做

<div>
    <div></div>
    <div></div>
</div>

将同位素附加到父容器。如果你希望它们出现在另一个空间

，则不需要改变除边缘部分以外的样式