將div懸停在內容將保留的另一個div上

Question

所以，我想要做的是並排放置2個div。當我將鼠標懸停在左側div上時，我希望它將寬度擴展到整個頁面，同時覆蓋右側div。當我將鼠標懸停在右側div上時，我想擴大寬度-100％，因此它覆蓋了左側div。我讓他們並排坐着，左邊的div轉換到右邊100％，右邊的div向左邊擴展-100％。我遇到的主要問題是，它會顯示100％的擴展到任何一方的div。這是我的代碼。

截至目前我只使用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絕對的，這兩者。有一個權利：0;然後，設置懸停時的寬度和z-index。

<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

我在面板類中添加了一些常用元素。將父母設置爲親戚會爲孩子面板提供一個共同的起點。將面板設置爲絕對將允許您將它們放置在窗口的左側和右側。向正在懸停的面板添加z-index 2會將其覆蓋在非懸停面板上。

<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; 
}