Question

我有一个问题，所以，我的标题下面是我的菜单框，当它们悬停在它们上面并展示内容时会扩展。到目前为止我有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%);
}

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/

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

1 个答案: