divの上にdivを置いて、内容が残るdivの上に置く

Question

だから、私は2つのdivを並べて配置したいと思っています。左のdivにカーソルを合わせると、右のdivをカバーしながら、その幅をフルページに拡大します。右のdivにカーソルを合わせると、左のdivをカバーするように幅-100％を拡大したいと思います。私はそれらを左右に座って左のdivが右の100％に、右のdivが左に-100％に展開するようにしました。私が持っている主な問題は、それが拡大する両側のdivの100％を表示するということです。ここに私のコードです。

現在のところ、CSSプロパティを使用していますが、JavaScriptの方がうまくいくかどうかは教えてください。

HTML code 

    <div id="parent"> 
    <div id="wide">Wide (rest of width)</div> 
    <div id="narrow">Narrow (200px)</div> 
    </div> 

CSS Code 

#narrow { 
    margin-top: 100px; 
    padding-top: 20px; 
    float: right; 
    width: calc(100% - 50%); 
    height: 400px; 
    background: lightblue; 
    transition: width 2s; 
    z-index: -1000; 
} 

#narrow:hover { 
    width: 100%; 
} 

#wide { 
    margin-top: 100px; 
    padding-top: 20px; 
    float: left; 
    width: calc(100% - 50%); 
    background: lightgreen; 
    height: 400px; 
    transition: width 2s; 
    position: absolute; 
    z-index: 1000; 
} 

#wide:hover { 
    width: -100%; 
} 

Answer 1

ここに行きます！ position: fixedおよびz-index！

#narrow { 
 
    padding-top: 20px; 
 
    float: right; 
 
    width: 50%; 
 
    height: 400px; 
 
    background: lightblue; 
 
    transition: width 2s; 
 
    z-index: 0; 
 
    position:fixed; 
 
    right:0; 
 
} 
 

 
#narrow:hover { 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 

 
#wide { 
 
    padding-top: 20px; 
 
    width: 50%; 
 
    background: lightgreen; 
 
    height: 400px; 
 
    transition: width 2s; 
 
    position:fixed; 
 
    left:0; 
 
    z-index: 0; 
 
} 
 

 
#wide:hover { 
 
    width: 100%; 
 
    z-index: 1; 
 
}

<div id="parent"> 
 
    <div id="wide">Wide (rest of width)</div> 
 
    <div id="narrow">Narrow (200px)</div> 
 
    </div>

Answer 2

別の解決策：両方0 Zインデックスと、絶対両方divを位置付けます。そのうちの1つは権利を有する：0;次に、ホバーに幅とZ-インデックスを設定します。

<div id="parent"> 
    <div id="wide">Wide (rest of width)</div> 
    <div id="narrow">Narrow (200px)</div> 
</div> 



#narrow { 
    margin-top: 100px; 
    padding-top: 20px; 
    Float: right; 
    width: 50%; 
    height: 400px; 
    background: lightblue; 
    transition: width 2s; 
    Z-index: 0; 
    Position: absolute; right: 0; 
} 

#narrow:hover { 
    width: 100%; 
    Z-index: 1; 
} 

#wide { 
    margin-top: 100px; 
    padding-top: 20px; 
    float: left; 
    width: 50%; 
    background: lightgreen; 
    height: 400px; 
    transition: width 2s; 
    position: absolute; 
    Z-index: 0; 
} 

#wide:hover { 
    width: 100%; 
    Z-index: 1; 
} 

Answer 3

いくつかの共通要素をパネルクラスに追加しました。親を相対として設定すると、子パネルに共通の開始点が与えられます。パネルを絶対的に設定すると、ウィンドウの左右に配置することができます。上に乗っているパネルに2のZ-​​インデックスを追加すると、そのパネルは非ホバリングパネル上に移動します。

<div id="parent"> 
    <div class="panel" id="wide">Wide (rest of width)</div> 
    <div class="panel" id="narrow">Narrow (200px)</div> 
</div> 

#parent { 
    position:relative; 
    width:100%; 
    height:400px; 
    overflow:hidden; 
} 
.panel { 
    margin-top:100px; 
    padding-top:20px; 
    height:100%; 
    width:50%; 
    z-index:1; 
} 
#narrow {  
    position:absolute; 
    right:0; 
    top:0; 
    background: lightblue; 
    transition: width 2s; 
} 

#narrow:hover { 
    width: 100%; 
    z-index:2; 
    transition: width 2s; 
} 

#wide {  
    position:absolute; 
    left:0; 
    top:0; 
    background: lightgreen; 
    transition: width 2s;  
} 

#wide:hover { 
    width:100%; 
    z-index:2; 
    transition: width 2s; 
}