javascript - 将一个 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>