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