如何创建一行三个 expandable/collapsible 悬停时有反应的 div？

Question

我想要实现的是一个包含三个内联 div 的容器，当鼠标悬停在它们上面时，它们会在整个容器上扩展。其中一个 div 向右浮动，一个向左浮动，一个居中。这是一个 jsfiddle 页面，因此您可以更好地理解我在尝试什么。

<div id="container">
        <div id="container-left">
            <div id="info-img-container" onmouseover="hoverOverLeft();" onmouseout="unHoverLeft();">
                <img id="info-img" src="images/info.png" alt="info" name="info"/>
            </div>
            <div id="info-text-container">
                Hover your mouse over this card to find info on how to use this website
            </div>
        </div>

        <div id="container-right">
            container right
        </div>

        <div id="container-center">

        </div>


    </div>

和 css:

#container{
margin: auto;
width: 85%;
height:55%;
display: block;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;

}
#container-left{
position: absolute;
background-color:#F8F8FF;
width: 33%;
height:100%;
display: inline-block;
float: left;
z-index:2;
transition: all 2s ease-in-out;
}

#container-left:hover{
width:100%;
z-index:999;
transition: all 2s ease-in-out;
}

#container-right{
position:absolute;
background-color:#6050DC;
width: 33%;
height:100%;
display: inline-block;
float: right;
z-index: 4;
right:0;
transition: all 2s ease-in-out;
}

#container-right:hover{
width:100%;
z-index:201;
transition: all 2s ease-in-out;
}

#container-center{
width: 33%;
height:100%;
display: inline-block;
position: absolute; 
left: 33.5%;
z-index: 3;
background:url("../images/cloud.jpg") no-repeat;/*sets background pattern*/
background-size: cover;
}



#info-img-container{
float:left;
display: inline-block;
margin-left:0;
width:28%;
height:100%;
vertical-align: middle;
}

#info-text-container{
float: right;
display: inline-block;
font-size: 50px;
position:relative;
margin-right:0;
width:65%;

}

#info-img{
height: 100%;
width: 220px;
vertical-align: middle;
}

我正在让两侧的div展开，左边的向右展开，右边的向左展开，但我不知道如何让中间的向两边展开。任何想法如何使用 HTML/CSS/JavaScript 来做到这一点？

Answer 1

添加以下内容 css，您应该会在中心 div.

获得全屏悬停

#container-center:hover {
    width: 100%;
    left: 0;
    right: 0;
    z-index: 5;
}

如果您希望它与其他悬停相匹配，请不要忘记将过渡添加到 #container-center。

如何创建一行三个 expandable/collapsible 悬停时有反应的 div？

How to create a row of three expandable/collapsible divs which react on hover?

html

javascript

css

expandable