Question

我有一个带有用户个人资料图片（粉红色）的侧边栏。当观看者悬停在图像上时，会出现div（蓝色），其中包含用户详细信息。基本上，我希望绝对定位 div在其兄弟的旁边显示。

它在功能上是一个popover，但我想用纯CSS来做，是否可能？

我正在使用boostrap 4，如果建议可以与Bootstrap CSS共存，那将会很好。如果div可以将箭头与之关联，那将会非常棒。

我的代码是：

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

我尝试在Stackoverflow中搜索，大多数问题都与float div相关，并且旁边的，但是我想要一些absolute positioned，并显示在身体的顶部。

更新

提供的大多数建议都符合部分要求。建议的.css-popover 宽度和高度受父母限制，但我希望popover 维度与父级相同，即只是“弹出”并且它不会“改变”下面的布局。

当弹出窗口出现时，它也不会改变父高度。我希望只要出现弹出窗口，侧边栏“图标”（浅粉色图标）就会保留在原位。

如果用CSS无法实现，那么我就去寻求JS解决方案......

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

（注意：用户内容很长，所以它的高度通常会超过个人资料图片的高度）

更新2： 感谢@Gezzasa，他的解决方案正在发挥作用。 ^ _ ^

盖伊，这是纯CSS popover 的工作示例！惊人！

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

谢谢，伙计......

Answer 1

嗨，你可以尝试这样的事情

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 2

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

在父项上设置悬停并将子项设置为display：block;

你需要添加绝对位置等，但这是我以前做过的。

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

更新：制作父显示：内联块，但你总是可以添加一个宽度。

UPDATE2：我也为你添加了一些css动画。

更新3：编辑你的小提琴https://jsfiddle.net/byanjiong/nohno2bd/15/

Answer 3

这是一个纯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 4

根据需要更改尺寸

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

1）使用Pure css。

TypeError: callback is not a function

.wrap {
   position: relative;;
}

.im {
   width: 200px;
}

img {
   width: 100%;
}

.css-popover{
   display: none;
}

.im:hover + .css-popover {
   display: block;
}

figure {
   margin: 0;
}

2）使用Jquery

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

$(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;
}

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

5 个答案: