当我将鼠标悬停在div上时，Div会从div中移开 [英] Div push away from divs when I mouse over the div

问题描述

我运行Masonry和所有我的帖子容器div，我想要标题和标签出现时，我悬停在post div。我试图在帖子顶部显示标题，并显示在帖子下方的标签，当我将鼠标悬停在帖子上方时，将其他帖子显示在帖子上。

I am running Masonry and all my post container divs and I want the title and tags to appear when I hover over the post div. I am trying to display the title on top of the post and the tags to appear under the post and push the other posts around it when I hover over the post.

我悬停在一个帖子上标题显示正确推动上面的div，但底部div不会推开，而是它下面的帖子下面。

When I hover on a post the title display properly pushing the div above it away but the bottom div does not push away instead it appears under the post below it.

示例

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

推荐答案

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

As Jakub mentioned, the positioning is wrong. In your example i added

#content div{
        position: static !important;
    }

并修正问题。虽然这样工作。它仍然不是正常运作你想要的。我建议创建一个新的容器div，设置您的边距和padding的div正方形整个容器div，直到它的工作按照需要。

And it corrects the problem. Although this works. It still isn't functioning how you would want. I recommend building a new container div, setting your margins and padding's on the div "squares" throughout that container div, until its working as desired.

这篇关于当我将鼠标悬停在div上时，Div会从div中移开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！