CSS3 - How do I make one element (preferably a div element) move, moving over another element?

Question

I tried to make one element move, for example, from one point to another, hovering over another div element. But I could not figure out how to do this!

I want this: Let's say there is a div element, 200x200 and background-color: black. And there is one more, but with the background color: red. And if possible, another with a background color: green.

They are placed along the center or screen vertically. One below the other. When I hang over one of them, the other two will move from right to left. As long as the one that is hovering over, remains stationary. Any guesses how to do this?

Answer 1

.container:hover :not(:hover).

DEMO

.container:hover .wrapper:not(:hover) .block {
    margin-left: -400px;
}

Answer 2

CSS, , , .

HTML

<span id="boss">hover here</span>
<div id="move_me"></div>

CSS

#move_me {

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    background:#00f; 
    width:100px; 
    height:100px;
    z-index:1;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}


#boss {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:70px;
    margin-left:-50px;
    width:100px;
    height:100px;
    z-index:2;
    background:#ddd;
}


#boss:hover + div {
    left:10%;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}

DEMO

Answer 3

I made a decision, but a constant width is required for the main container. In my fiddle, the main container is #blockswith width:475px:

Fiddle

HTML

<center>
<div id="blocks">
    <div class="innerDiv">
        <div class="block red"></div>
        <div class="block blue"></div>
        <div class="block green"></div>
    </div>
</div>
</center>

CSS

#blocks{
    width:475px;
    height:150px;
    border:1px solid black;
}
.innerDiv{
    width:50px;
    height:150px;
    margin:0px auto;
}
.innerDiv:hover{
    margin-left:0px;
}
.block{
    width:50px;
    height:50px;
}
.block:hover{
    margin-left:213px;
}
.red{
    background-color:red;
}
.blue{
    background-color:blue;
}
.green{
    background-color:green;
}

Answer 4

Common Brother Combinator - A Little More Flexible Pen

<span id="boss">hover here</span>
<div id="seperator"></div>
<div id="sum">
    <div id="move_me"></div>
</div>

CSS

#move_me {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    background:#00f; 
    width:100px; 
    height:100px;
    z-index:1;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
#boss {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:70px;
    margin-left:-50px;
    width:100px;
    height:100px;
    z-index:2;
    background:#ddd;
}

#boss:hover ~ #sum #move_me {
    left:10%;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}