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！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

另一个解决方案：将两个div都置为绝对值，两者都是0 z-index。其中一个有权利：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;   
}

将div悬停在另一个Div上，其中内容将保留

3 个答案: