CSS 将绝对 div 放在另一个 div 旁边（纯 CSS 弹出窗口）

Question

我有一个带有用户个人资料图片（粉红色）的边栏。当查看者将鼠标悬停在图像上时，会出现 div（蓝色），其中包含用户详细信息。基本上，我想要一个 绝对定位 div 出现在其兄弟姐妹的 旁边。

它在功能上是一个弹出窗口，但我想用纯 CSS 来做，可以吗？

我用的是boostrap 4，如果建议可以co-exists和Bootstrap CSS就好了。如果 div 可以有一个箭头与之关联，那就太棒了。

我的代码是：

<div> <div><figure class="figure"><img ... /></figure></div> //css-popover <div class="css-popover">User detail: ... bla bla bla ...</div> </div>

我试图在 Whosebug 中搜索，大部分问题都与 float div 相关，并使其成为旁边，但我想要一些东西 absolute positioned，并显示在正文的顶部。

更新：

提供的大部分建议都满足了部分要求。建议的 .css-popover width 和 height 以 parent 为界，但我希望 popover 维度与 parent 独立，即只是 "popup" 而不是 "change" 下面的布局。

当弹出窗口出现时，它也不会改变 parent 高度。我希望边栏 "icon"（浅粉色图标）在出现弹出窗口时保持原位。

如果 CSS 不行，那我就用 JS 解决方案...

你可以在这里碰碰运气。 https://jsfiddle.net/byanjiong/nohno2bd/13/

（注：用户内容较长，一般会超过头像高度）

更新二： 感谢@Gezzasa，他的解决方案正在运行。 ^_^

伙计，这是纯CSS弹出窗口的工作示例！太棒了！

https://jsfiddle.net/byanjiong/nohno2bd/15/

谢谢，伙计...

Answer 1

根据需要更改尺寸

.popover-container{
  position: relative;
}
.css-popover{
  position: absolute;
}
.css-popover {
 background: #88b7d5;
 border: 4px solid #c2e1f5;
}
.css-popover:after, .css-popover:before {
 right: 100%;
 top: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.css-popover:after {
 border-color: rgba(136, 183, 213, 0);
 border-right-color: #88b7d5;
 border-width: 30px;
 margin-top: -30px;
}
.css-popover:before {
 border-color: rgba(194, 225, 245, 0);
 border-right-color: #c2e1f5;
 border-width: 36px;
 margin-top: -36px;
}

<div>
    <div class = "popover-container" ><figure class="figure"><img ... /></figure><div class="css-popover">User detail: ... bla bla bla ...</div></div>

    
</div>

Answer 2

您好，您可以尝试这样的操作

html

<div class="container">
  <div class="img-con">
  <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" alt="" />
    <div class="info-con">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam modi, distinctio nostrum reprehenderit explicabo amet exped
  </div>
  </div>

</div>

css

.img-con
{
  height:150px;
  width:150px;
  position: relative;
}
.info-con
{
  position: absolute;
  top:0;
  right:0;
  background-color: #5C6BC0;
  bottom:0;
  left:0;
  height:100%;
  width:100%;
  margin:auto;
  transition:all ease 0.4s;
  padding:3px;
  opacity:0;
}
.info-con::after
{
  content:"";
  position: absolute;
  left:-40px;
  top:0;
  bottom:0;
  margin:auto;
  height:0;
  border:20px solid transparent;
  border-right-color:#5C6BC0;
}
.img-con:hover .info-con
{
  right:-110%;
  left:auto;
  opacity:1;
}

link for reference

Answer 3

https://jsfiddle.net/dqwtvf1g/3/

在父项上设置悬停并设置子项显示：块；

您需要添加绝对位置等，但我以前就是这样做的。

.figure {background-color: #fff; width: 100px; height: 100px;}
.css-popover {display: none; width: 50px; height: 50px; background-color: #fff;}
.parent:hover .css-popover{display: block;}

更新：使父级显示：内联块，但您始终可以只添加宽度。

更新 2：我也为您添加了一些 css 动画。

更新 3：编辑了您的 fiddle https://jsfiddle.net/byanjiong/nohno2bd/15/

Answer 4

这是一个纯粹的 CSS 解决方案。但我建议使用 JS

body {
  margin: 0px;
}

.figure {
  height: 20px;
  width: 100px;
  background: pink;
  float: left;
  margin: 0px;
}

.figure+.css-popover {
  height: 50px;
  width: 0px;
  background: lightblue;
  transition: all 0.3s ease;
  float: left;
  position: relative;
  visibility: hidden;
  left: 5px;
  overflow: hidden;
  padding: 10px;
}

.figure+.css-popover::before {
  content: '';
  display: inline-block;
  height: 0px;
  width: 0px;
  border: 5px solid transparent;
  border-right: 5px solid lightblue;
  position: absolute;
  top: 5px;
  left: -10px;
}

.figure:hover+.css-popover,
.css-popover:hover {
  width: 100px;
  visibility: visible;
  overflow: visible;
}

.clearfic,
.clearfix:after,
.clearfix:before {
  content: "";
  clear: both;
  display: table;
}

<div class="clearfix">
  <figure class="figure"></figure>
  <div class="css-popover">User detail: ... bla bla bla ...</div>
</div>
<div>Some content</div>

编辑：添加箭头

Answer 5

1) With Pure css.

.wrap {
   position: relative;;
}

.im {
   width: 200px;
}

img {
   width: 100%;
}

.css-popover{
   display: none;
}

.im:hover + .css-popover {
   display: block;
}

figure {
   margin: 0;
}

<div class="wrap">
   <div class="im">
     <figure class="figure"><img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" /></figure>
   </div>
   <div class="css-popover">User detail: ... bla bla bla ...</div>
</div>

2) With Jquery

$(document).ready(function(){
 $('.figure img').hover(function(){
  $('.css-popover').css('display','block');
 },function(){
  $('.css-popover').css('display','none');
   })
})

.css-popover {
  display: none;
}

img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
   <div>
       <figure class="figure"><img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" /></figure>
    </div>
    <div class="css-popover">User detail: ... bla bla bla ...</div>
</div>

CSS 将绝对 div 放在另一个 div 旁边（纯 CSS 弹出窗口）

CSS placing an absolute div beside another div (pure CSS popover)

css

twitter-bootstrap-4