将鼠标悬停在多个内容上以展开

Question

我有一个问题，所以，在我的标题下方是我的菜单框，它们将在悬停在它们上方时展开并显示内容。到目前为止，我有 3 个框，但是当我将鼠标悬停在 1 个框上时，我如何设法进行转换，其他 2 个框调整大小/重新定位，以便第一个框（mainCONntent）扩展并且读者可以很好地查看它。将鼠标悬停在所有框上时也应如此。请帮忙。

<div id="mainContent">Content goes here</div>
  <aside id="biographie">
    <h1>Content goes here</h1>
    </aside>
<div id="projects" class="clearOne">Content goes here<div>

CSS：

#mainContent {

height: 250px;
width: 200px;
float: left;
font-family: cuprum;
line-height: 25px;
-webkit-transition: all 0.8s ease-in-out 0s;
-o-transition: all 0.8s ease-in-out 0s;
transition: all 0.8s ease-in-out 0s;
opacity: 0.5;
display: block;
overflow-y: hidden;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 60px;
padding-left: 5px;
text-align: left;
background-image: -webkit-linear-gradient(309deg,rgba(250,65,255,0.45) 0%,rgba(255,116,234,0.19) 100%);
background-image: linear-gradient(141deg,rgba(250,65,255,0.45) 0%,rgba(255,116,234,0.19) 100%);
}

#mainContent:hover {
-webkit-transform: 2;
-o-transform: 2;
transform: 2;
-webkit-opacity: 1;
opacity: 1;
width: 600px;
height: 350px;
margin-top: 5px;
padding-left: 20px;
padding-top: 20px;
vertical-align: middle;
transition: all 0.8s ease-in-out 0s;
}

#projects {
background-color: rgba(234,197,244,0.14);
height: 350px;
width: 454px;
float: left;
padding-top: 26px;
padding-right: 5px;
padding-bottom: 30px;
margin-bottom: 90px;
font-family: cuprum;
line-height: 25px;
left: 352px;
position: absolute;
top: 405px;

}
#biographie {
float: left;
width: 136px;
height: 200px;
padding: 0px 5px;
position: relative;
font-family: cuprum;
font-style: normal;
font-weight: 400;
left: 2px;
-webkit-transition: all 0.8s ease-in-out 0s;
-o-transition: all 0.8s ease-in-out 0s;
transition: all 0.8s ease-in-out 0s;
overflow-y: hidden;
background-image: -webkit-linear-gradient(270deg,rgba(181,217,240,0.17)      0%,rgba(190,133,232,0.27) 100%);
background-image: linear-gradient(180deg,rgba(181,217,240,0.17) 0%,rgba(190,133,232,0.27) 100%);
}

Answer 1

我认为最好使用 javascript。或jQuery .. 或阅读此页面 Use :hover to modify the css of another class?

&

我使用了这个 jquery 代码

$("#mainContent").hover(
    function(){
        $("#projects").css({"width":200,"height":200});
        $("#biographie").css({"width":200,"height":200});
    },function(){
        $("#projects").css({"width":100,"height":100});
        $("#biographie").css({"width":100,"height":100});
});

看这个http://jsfiddle.net/36h36/6/