html - CSS Positioning div on top with z-index

Question

我有一个包含三个 div 的容器。每个 div 都包含一个隐藏的 div，它有一个“隐藏”类 (display:none;)，当悬停在其父 div 上时应该在其中显示。

我使用 toggleClass('show') 使 secretDiv 显示有一个 block 。当悬停在父 div 上时，我需要显示 secretDiv。

父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');
});

Answer 1

首先更改您的选择器以仅匹配相应的隐藏 div:

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

然后在该元素上添加另一个类以显示在其他元素之上:

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

类:

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

检查这个Demo