悬停影响不是兄弟姐妹的元素

Question

Following situation:
I have three divs inside a container. If I hover one of these divs the other two should change their appearance.
Here is a fiddle showing my current situation:
http://jsfiddle.net/SUBHUMAN/gb63t8sb/
As you can see it only affects the elements that appear after the hovered element in the DOM.

Is there any way to achieve the wanted behaviour 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

The problem is that currently CSS does not support previous siblings selector, so your attempt with general sibling selector ( ~ ) will lead only to selection of next siblings of the hovered element.

However, you can simulate the behaviour with the following:

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

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