我正在运行砌筑工和我的所有帖子,并且希望将鼠标悬停在帖子上时显示标题和标签。我试图将标题显示在图像的顶部,并将标签显示在图像下方,并在将鼠标悬停在帖子上方时,将其周围的其他帖子推开。

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

Demo

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

最佳答案

我相信您需要的是按照以下方式更改这些元素的顺序。

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


由于相对定位和浮动,您失去了镶嵌效果。当您的元素按比例增加时。您可以尝试打仓位。您正在寻找将:hover添加到position:absolutetitle中。

关于html - div将其他div悬停,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23178175/

10-12 00:08
查看更多