html - 选择不同的 div 时移动一个 div

Question

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

当有人将鼠标悬停在 div1 上时，我希望它向左移动，并使其下方的 div2 向右移动。我已经尝试过，但似乎无法完成..

这是我的代码:

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

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

Answer 1

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

这里我刚刚编辑了 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