Question

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

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

父div应该显示在下面div的顶部，而不是推动其他div

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

然后在该项目上添加另一个类以显示其他项目的ontop：

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

上课：

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

选中此Demo

Answer 2

只需在您的'秘密'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');

CSS使用z-index将div定位在顶部

2 个答案: