CSS定位div與Z指數頂部

我有一個容器有三個div。每個div都包含一個隱藏的div，該隱藏的div有一個'hide'類（display:none;），其內部應該顯示在其父div上。我使用toggleClass('show')，使secretDiv顯示有一個塊。我需要secretDiv在鼠標懸停在父div上時顯示。CSS定位div與Z指數頂部

父DIV應顯示下面的DIV的頂部，而不是推其他的div

http://jsfiddle.net/2xLMQ/4/

--- HTML ---

<div class="row"> 
    <div class="element"> 
     <img src="http://placehold.it/200x100" alt="" title="" /> 
     <div class="secretDiv hide"> 
      <p>Some secret text and stuff</p> 
     </div> 
    </div> 
    <div class="element"> 
     <img src="http://placehold.it/200x100" alt="my image" title="image title" /> 
     <div class="secretDiv hide"> 
      <p>Some secret text and stuff</p> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="element"> 
     <img src="http://placehold.it/200x100" alt="" title="" /> 
     <div class="secretDiv hide"> 
      <p>Some secret text and stuff</p> 
     </div> 
    </div> 
    <div class="element"> 
     <img src="http://placehold.it/200x100" alt="my image" title="image title" /> 
     <div class="secretDiv hide"> 
      <p>Some secret text and stuff</p> 
     </div> 
    </div> 
</div>

--- CSS - -

.hide {display:none;} 
.show {display:block;} 
.row {height:160px;background:#dedede;float:left;width:480px;position:relative:z-index:1;} 
.row .element {position:relative;z-index:9;text-align:center; float:left; background:#666;width:200px;padding:12px;margin:6px;} 
.row .image {} 
.row .secretDiv {background:#ff0000;padding:8px;}

--- JS ---

$('.element').hover(function(){ 
    $('.element .secretDiv').toggleClass('show'); 
});

來源

2014-01-14 mlclm

像這樣http://jsfiddle.net/j08691/2xLMQ/5/？不知道你到底是什麼。 – j08691

那麼問題是什麼 –

或者像這樣：http://jsfiddle.net/2xLMQ/7/ – putvande

首先改變你的選擇只有符合相應的隱藏的div：

$('.secretDiv',this).toggleClass('show');

然後在該項目上再添類顯示ontop的其他的：

$(this).toggleClass('ontop');

而等級：

.row .ontop {z-index:10;background:orange;}

檢查Demo

來源

2014-01-14 14:33:59 DaniP

可以解釋DV嗎？ – DaniP

不知道你爲什麼被低估，但爲什麼額外的.ontop類？ – j08691

@ j08691只是爲了讓更多的變化，如果他想突出像背景。但他當然可以改變'z-index'的值 – DaniP

簡單的絕對定位添加到您的「祕密」 DIV：

.row .secretDiv {background:#ff0000;padding:8px; position: absolute; top: 5px; left: 5px;}

小提琴這裏：http://jsfiddle.net/moonspace/2xLMQ/12/

作爲獎勵，我已經編輯您的jQuery只顯示「祕密」 DIV關聯每個元素：

$('.secretDiv', this).toggleClass('show');

來源

2014-01-14 14:37:07

CSS定位div與Z指數頂部

回答

相關問題