javascript - 如何创建一排三个可展开/可折叠的 div，这些 div 在悬停时会使用react？

Question

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

https://jsfiddle.net/hn59ooL5/

<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。