jquery - 当我将鼠标悬停在 div 上时，Div 会远离 div

Question

我正在运行 Masonry 和我所有的帖子容器 div，我希望当我将鼠标悬停在帖子 div 上时显示标题和标签。我试图在帖子顶部显示标题，在帖子下方显示标签，并在我将鼠标悬停在帖子上时将其他帖子推到它周围。

当我将鼠标悬停在帖子上时，标题会正确显示将其上方的 div 推开，但底部的 div 不会推开，而是出现在其下方的帖子下方。

Example

<div id="content">
  <div class="post">
     <div class="title">Post Title</div>
     <div class="image2"></div>
     <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
     <div class="title">Post Title</div>
     <div class="image1"></div>
     <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
    </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
</div>

Answer 1

正如 Jakub 所说，定位是错误的。在您的示例中，我添加了

#content div{
        position: static !important;
    }

它解决了这个问题。虽然这有效。它仍然无法按照您想要的方式运行。我建议构建一个新的容器 div，在整个容器 div 的 div“正方形”上设置边距和填充，直到它按需要工作为止。