0

アイテムのレイアウトに同位体を使用しています。各項目にはポップアップ メニューが含まれます。同位体はtranslate3dアイテムをレイアウトしてアニメーション化するためにメニューの積み重ね順序を使用するため、私たち全員がめちゃくちゃになりました. アイテムには があり、メニューには がありますが、後のアイテムは前のメニューのメニューを非表示にしz-index: 1ますz-index: 2。これを解決する方法はありますか?

動作を示す例を次に示します ( jsfiddle )。

CSS:

.items {
    position: relative;
}

.item {
    position: absolute;
    z-index: 1;
    width: 90px;
    height: 90px;
    background: lightgray;
    padding: 5px;
}

.menubutton {
    position: relative;
}

.menu {
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0px;
    list-style: none;
    margin: 0;
    padding: 5px;
    background: yellow;
}

.menubutton .menu {
    display: none;
}

.menubutton:hover .menu {
    display: block;
}

HTML:

<div class="items">
<div class="item" style="-webkit-transform: translate3d(10px,10px,0px); transform: translate3d(10px,10px,0px);">
<div class="menubutton">
    <div class="label">menu</div>
    <ul class="menu">
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>                    
    </ul>
</div>
    ...
</div>
<div class="item" style="-webkit-transform: translate3d(10px,120px,0px); transform: translate3d(10px,120px,0px);">
<div class="menubutton">
    <div class="label">menu</div>
    <ul class="menu">
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>                    
    </ul>
</div>
    ...
</div>
</div>
4

2 に答える 2

1

私はちょうどそれを解決する方法のアイデアを得ました. このスタイルを追加しました:

.item:hover {
    z-index: 2;
}

このようにして、現在ホバリングされているアイテムは常に他のすべてのアイテムの前に表示されます。

参照: http://jsfiddle.net/paskQ/5/

于 2012-11-16T18:52:23.513 に答える
0

.itemそれぞれが同じを持っているように見えるので、同じものを持っているにもかかわらず、z-index後続のそれぞれ.itemが前のものの上に積み重ねられています。z-index.z-indexz-index.menu

私は同位体に精通していないので、これは実行可能な解決策ではないかもしれませんが、jQueryを追加できる場合は、z-index後で値を動的に設定して、次のような問題を修正できます

var total = $(".item").length;
$(".item").each(function(){
   $(this).css("z-index", total);
   total--;        
});

ここにフィドルがありますhttp://jsfiddle.net/paskQ/4/

それがうまくいかない場合はお知らせください。別の解決策を見つけることができるかもしれません。また、ご不明な点がありましたらお知らせください。

于 2012-11-16T18:44:56.543 に答える