我正在运行砌筑工和我的所有帖子,并且希望将鼠标悬停在帖子上时显示标题和标签。我试图将标题显示在图像的顶部,并将标签显示在图像下方,并在将鼠标悬停在帖子上方时,将其周围的其他帖子推开。
当我将鼠标悬停在帖子上时,标题显示会正确地将其上方的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:absolute
和title
中。关于html - div将其他div悬停,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23178175/