Guidance affecting elements that are not siblings

Question

The following situation:
I have three divs inside the container. If I find one of these divs, then the other two should change their appearance.
Here is a script showing my current situation:
http://jsfiddle.net/SUBHUMAN/gb63t8sb/
As you can see, this only affects the elements that appear after the hanging element in the DOM.

Is there a way to achieve the desired behavior, preferably without using JavaScript?

HTML:

<div id="container">

    <div id="one">
    </div>

    <div id="two">
    </div>

    <div id="three">
    </div>
</div>

CSS:

#one {
    width:30px;
    height:30px;
    border:1px solid red;
}

#two {
    width:30px;
    height:30px;
    border:1px solid red;
}

#three {
    width:30px;
    height:30px;
    border:1px solid red;
}

#one:hover ~ div {
    background-color:black;
}

#two:hover ~ div {
    background-color:blue;
}

#three:hover ~ div {
    background-color:purple;
}

Answer 1

, CSS siblings, (~) .

:

#container:hover > :not(:hover) {
    background-color: blue;
}

DEMO: http://jsfiddle.net/gb63t8sb/4/