jquery-isotope - 隐藏 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>
</div>

而不是将同位素附加到父容器。如果您希望它们出现在其他空间上，则无需更改除边距部分之外的样式