I've been trying to make one element move, like, from one point to the other by hovering over another div element. But I couldn't figure out how to!

What I want is this:
Say there is a div element, 200x200 and background-color: black.
And there is another, but with background-color:red.
And if perhaps another one, with background-color:green.

They are placed along the center or the screen, vertically. One below the other.
When I hover over one of these, the other two will move from in a right to left direction.
While the one the cursor is hovering over, will remain still.
Any guesses how to do this?