Сделайте одно перемещение div при выборе другого div

Question

У меня есть два divs, под друг другом.

Когда кто-то наводит курсор на 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.

Здесь я только что отредактировал имена/значения идентификаторов, вы можете изменить их согласно вашему требованию.

#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