我想显示成行的员工图片,并在悬停时在包含人员姓名/传记的图片旁边弹出一个进一步的描述框。
我知道悬停时隐藏/显示 div 可用于实现此效果,但我不确定它将如何影响行/列布局。
如有任何帮助,我们将不胜感激。
HTML:
<div class="row">
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
</div>
最佳答案
我相信您正在寻找的是 Popover它应该位于现有网格之上,并且不会干扰图像的放置。
您可以通过在每个弹出窗口上设置数据属性来触发它在悬停时触发,如下所示:
data-trigger="hover"
或者像这样将它传递给初始化程序:
.popover({ trigger: "hover" })
堆栈片段中的演示:
$('[data-toggle="popover"]').popover({
placement: "auto",
trigger: "hover"
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/wq83mXh.jpg" data-toggle="popover"
title="Mark Otto" data-content="3,972 commits / 496,347 ++ / 484,436 --" >
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/RLuBL13.png" data-toggle="popover"
title="Chris Rebert"data-content="1,114 commits / 33,796 ++ / 46,366 --">
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/UP58UYq.jpg" data-toggle="popover"
title="fat" data-content="805 commits / 143,748 ++ / 100,852 --">
</div>
</div>
</div>
关于javascript - Bootstrap 3悬停时弹出的对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30986230/