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名称/值，您可以根据自己的要求进行更改。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Fiddle : DEMO

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

1 个答案: