我可能遇到了一个相当简单的问题，但我自己无法解决。
我打算有 3 个 div，左右 div 应该充当守门员。中间的应该隐藏起来，直到我将鼠标悬停在一个守卫上方。但是我希望中间的 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>
问题是，它既没有占用所有剩余的空间，也没有过渡看起来不错，因为文本出现在过渡的第一秒，然后有点开始适应，一旦空间可用。
希望你能帮助我。
最佳答案
产生非常干净结果的一种解决方案是通过包含滑动图像的父元素触发动画。这使得实现您想要的效果变得相当简单:
希望对您有所帮助!
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>关于html - 在两个 div 容器之间切换菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43956327/