懸停上的重疊元素

我想要一個引導面板標題在懸停時展開，但它不得按下此小提琴中顯示的下一個面板：http://jsfiddle.net/2jwg0a35/2/。懸停上的重疊元素

我想要的是，當您將鼠標懸停在面板標題上時，它將重疊面板主體而不是推下一個面板。

我的HTML只是Twitter的引導的東西，看起來像這樣：

<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/>[email protected] 
     <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; 
}

任何人都知道我能做些什麼來實現這一目標？

非常感謝！

來源

2014-10-17 Tom

它工作正常，我http://jsfiddle.net/2jwg0a35/3/ – 2014-10-17 15:41:57

這就是你想要的？

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 */ 
}

來源

2014-10-17 16:03:15 Berthy

給在面板 - 航向負margin-bottom：http://jsfiddle.net/2jwg0a35/4/

來源

2014-10-17 16:00:07

'+ 1'了很好的答案。我將'Berthy's'答案標記爲答案，因爲在你的小提琴中，'panel-header'在盤旋時必須始終保持相同的高度。因此，「panel-header」中的圖像不能具有變量「height」，只要「panel-body」具有「padding-top」，圖像的高度與「Berthy's」答案無關必須與沒有懸停時的「panel-header」相同。謝謝你的努力。 – Tom 2014-10-17 20:09:23

這裏

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

來源

2014-10-17 16:20:27

懸停上的重疊元素

回答

相關問題