Question

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

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

#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;}

<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

我相信你需要的是以下列方式改变这些元素的顺序。

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

由于相对定位和浮动，您正在失去马赛克效果。当:hover您的元素按比例增加时。你可以尝试玩位置。将position:absolute添加到title和details可能就是您要找的内容。

Div在悬停时推动其他div

1 个答案: