我正在运行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>
答案 0 :(得分:1)
砌体已经重新加载&#34; ,你可以这样做
$('.post').hover(
function(){
$('#content').masonry('reload');
},
function(){
$('#content').masonry('reload');
}
);