Question

我希望在悬停时展开引导程序面板标题，但它不能按下此小提琴中显示的下一个面板：http://jsfiddle.net/2jwg0a35/2/。

我想要的是，当您将鼠标悬停在面板标题上时，它将与面板体重叠，而不是向下按下面板体。

我的HTML只是twitter bootstrap的东西，看起来像这样：

<div class="panel panel-default">
    <div class="panel-heading">
        <img src="profile-pic.jpg" alt="Profile pic" />
    </div>
    <div class="panel-body"> <b>John Do</b>

        <br/>J.do@example.com
        <br/>Somestreet
        <br/> <b>City</b>

        <br/>
    </div>
</div>

我的CSS看起来像：

.panel-heading {
    height:100px;
}
.panel-heading:hover {
    height:150px; /*This actually must be 100% as there will be an image in it.*/
    position:relative;
}

有人知道我能做些什么来实现这个目标吗？

非常感谢！

Answer 1

在面板标题处给出否定的margin-bottom：http://jsfiddle.net/2jwg0a35/4/

Answer 2

这就是你要找的东西吗？

http://jsfiddle.net/2jwg0a35/5/

将您的小组标题添加到absolute，将panel-default添加到relative，然后将padding-top添加到panel-body。 padding-top必须与面板标题height的高度相同。

.panel-heading {
    height:100px;
    width: 100%;
    position: absolute;
}
.panel-heading:hover {
    height:150px;
}
.panel-default{
    position: relative; /* contain the absolute heading */
}
.panel-body{
    padding-top: 100px; /* Must be === to .panel-heading height */
}

Answer 3

下面

 .panel{
 border:1px solid transparent;
 }
 .panel-heading {
 height:100px;
 }
 .panel-heading:hover {
 height:150px; /*This actually must be 100% as there will be an image in it.*/
 position: absolute;
 width:100%;
 }
 .panel-heading:hover + .panel-body{
 margin-top:100px;
 }

悬停时重叠元素

3 个答案: