Question

我可能有一个相当简单的问题，我自己无法解决。

我计划有3个div，左右div应该作为有点类别。应该隐藏中间的一个，直到我将鼠标悬停在一个gateguards上。但是我希望中间div占用其他div剩下的剩余空间。转型也应该顺利，但我可以管理自己。

到目前为止我的代码：

<html>
<head>
<style>
    .navi{
        display: inline-block;
    }
    #middle{
        transition: width 1s ease-out;
        width: 0px;
        overflow: hidden;
        height: 0px;
    }
    nav{
        width: 100%;
        height: 169px;
        position: relative;
    }
    nav #left:hover + #middle{
        opacity: 1;
        height: auto;
        width: auto;
    }

    </style>
</head>
<body>
    <nav>
    <div id="left" class="navi"><img src="Left.png"></div>
    <div id="middle" class="navi">Lorem Ipsum</div>
    <div id="right" class="navi"><img src="Right.png"></div> 
    </nav>
</body>
</html>

这个问题是，它既没有占用剩下的所有空间，也没有过渡看起来很好，因为文本出现在过渡的第一秒，然后只是有点开始适应，一旦空间可用。

希望你能帮助我。

Answer 1

要使用CSS执行此操作，侧边栏需要在＆＃34;中间＆＃34;之前进行。元素，因此您可以使用相邻的选择器来定位它们。您可以使用order直观地重新排列它们。然后，您可以在flex-grow，flex-basis或width上转换/触发更改。我通过简写语法在此处转换flex-grow。

＆＃13;

nav {
  display: flex;
}

.side {
  width: 100px;
  background: #eee;
}

#middle {
  transition: flex 1s ease-out, opacity 1s ease-out;
  overflow: hidden;
  flex: 0 0 0;
  opacity: 0;
}

#left {
  order: 1;
}

.side:hover ~ #middle, #middle:hover {
  opacity: 1;
  flex: 1 0 0;
}

＆＃13;

<nav>
  <div id="left" class="navi side"><img src="Left.png"></div>
  <div id="right" class="navi side"><img src="Right.png"></div>
  <div id="middle" class="navi">Lorem Ipsum</div>
</nav>

＆＃13;

nav {
  display: flex;
}

.side {
  width: 100px;
  background: #eee;
}

#middle {
  transition: flex 1s ease-out, opacity 1s ease-out;
  overflow: hidden;
  flex: 0 0 0;
  opacity: 0;
}

#left {
  order: 1;
}

.side:hover ~ #middle, #middle:hover {
  opacity: 1;
  flex: 1 0 0;
}

＆＃13;

<nav>
  <div id="left" class="navi side"><img src="Left.png"></div>
  <div id="right" class="navi side"><img src="Right.png"></div>
  <div id="middle" class="navi">Lorem Ipsum</div>
</nav>

＆＃13;

Answer 2

产生非常干净的结果的一个解决方案是通过包含滑动图像的父元素触发动画。这样就可以实现你非常简单的效果：

JSFiddle

希望这会帮助你！

nav {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

nav:hover > #navi-middle {
  transition: all .5s ease-out;
  width: 100%;
  opacity: 1;
}

#navi-middle {
  transition: all .5s ease-out;
  width: 0px;
  overflow: hidden;
  opacity: 0;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<body>
    <nav>
    <div id="left" class="navi"><a href="http://placehold.it"><img src="http://placehold.it/150x150"></a></div>
    <div id="navi-middle"><pre>Lorem Ipsum</pre></div>
    <div id="right" class="navi"><a href="http://placehold.it"><img src="http://placehold.it/150x150"></a></div> 
    </nav>
</body>

Answer 3

所以，我认为你可以做这样的事情。

https://jsfiddle.net/pablodarde/gr6zzu8n/

<强> HTML

ERROR_IO_PENDING

<强> CSS

<nav>
  <div id="left" class="navi"><img src="http://ii.designtoscano.com/fcgi-bin/iipsrv.fcgi?FIF=/images/toscano/source/SH4210_2.tif&wid=2048&cvt=jpeg" width="200px"></div>
  <div id="middle" class="navi">
    <div>
      Lorem Ipsum  
    </div>
  </div>
  <div id="right" class="navi"><img src="http://ii.designtoscano.com/fcgi-bin/iipsrv.fcgi?FIF=/images/toscano/source/SH4210_2.tif&wid=2048&cvt=jpeg" width="200px"></div> 
</nav>

Answer 4

我假设你正在寻找类似的东西：

＆＃13;

body { margin: 0;}
left {background-color: #600}
right {background-color: #036}
container {
  display:flex;
  position: relative;
  min-height: 100vh;
}
container * {
  flex: 1;
  transition: flex-grow .4s cubic-bezier(.4,0,.2,1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  overflow: hidden;
  font-size: 3rem;
}
middle { 
  flex: 0;
  color: black;
}
container:hover middle {flex:1}
one,two {
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
}
two { left: 50%;}
one:hover ~ right {flex: 0}
two:hover ~ left {flex: 0}

＆＃13;

<container>
  <one></one>
  <two></two>
  <left>left</left>
  <middle>middle</middle>
  <right>right</right>
</container>

＆＃13;

关键是不要将移动元素用作控制器，而是使用两个控制器＆＃34;每个半部分放置absolute个元素，指示后续的（保留内容）应如何移动和排列。

在两个div容器之间切换菜单

4 个答案: