css - 将鼠标悬停在多个内容上以进行扩展

我有一个问题，因此，下面的标题是我的菜单框，它们会在将鼠标悬停在其上方并显示内容时展开。到目前为止，我有3个盒子，但是当我将鼠标悬停在1个盒子上而其他2个盒子的大小/位置改变时，我如何设法进行过渡，以便第一个盒子（mainCOntent）展开，读者可以对它有一个很好的了解。将所有鼠标悬停在它们上方时，应该使用相同的内容。请帮忙。

<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%);
}

最佳答案

我认为更好的是使用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/

关于css - 将鼠标悬停在多个内容上以进行扩展，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23872354/