div在悬停时推送div

Question

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

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

Example

CSS

#content {
    width: 210px;
    margin: 0 auto;
    overflow: auto;
    font-size: 10px;
}

.post {
    width: 50px;
    padding: 2px 2px;
    float: left;
    z-index: 1;
}

.post:hover .title {
    display: block;
}

.post:hover .details {
    display: block;
}

.title {
    display: none;
    z-index: 999;
}

.image1 {
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

.image2 {
    width: 50px;
    height: 50px;
    border: 1px solid blue;
}

.details {
    display: none;
    z-index: 999;
}

HTML

<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

砌体有“重新加载”，你可以这样做

$('.post').hover( 
    function(){
        $('#content').masonry('reload');
    },
    function(){
        $('#content').masonry('reload');
    }                     
);

Example