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指数顶部

回答

相关问题