选择不同的div时，进行一次div移动

I've got two divs, underneath each other.

我有两个div，在彼此之下。

When someone hovers over div1, I want it to make it move to the left, as well as make div2 underneath it move to the right.. I've had an attempt at this, but can't seem to complete it..

当有人在div1上盘旋时，我希望它让它向左移动，并让它下面的div2向右移动..我已经尝试过这个，但似乎无法完成它...

Here's my code:

这是我的代码：

    <div id="mainbox">
    <p>bla bla bla text</p>
    </div>
    <br />
    <footer id="mainbox" style="height: 77px;">
    <div id="mainbox2">
        <p>bla text text</p>
    </div>
    </footer>

#mainbox {
 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;
 background: red;
 border-radius: 40px;
}

#mainbox:hover {
 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;
 margin-left: -5%;
}

#mainbox:hover ~ #mainbox2 {
 margin-left: -5%;
}

Here's a JSFIDDLE: https://jsfiddle.net/payw97w0/1/

这是一个JSFIDDLE：https：//jsfiddle.net/payw97w0/1/

1 个解决方案

#1

First things first you should never have same id names.

首先，你应该永远不要有相同的id名称。

Here i have just edited the id names/values, you can change as per your requirement.

在这里我刚刚编辑了id名称/值，您可以根据您的要求进行更改。

#mainbox,
#mainbox1 {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  background: red;
  border-radius: 40px;
}
#mainbox1 {
  position: relative;
  right: 0px;
}
#mainbox {
  position: relative;
  left: 0px;
}
#mainbox1:hover {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  right: 5%;
}
#mainbox1:hover ~ #mainbox {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  left: 20px;
}

<div id="mainbox1">
  <p>bla bla bla text</p>
</div>
<br />
<footer id="mainbox" style="height: 77px;">
  <div id="mainbox2">
    <p>bla text text</p>
  </div>
</footer>

Fiddle : DEMO

小提琴：DEMO

#1