Question

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

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

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

砌体已经重新加载＆＃34; ，你可以这样做

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

Example

Div push divs on hover

1 个答案: