Sibling Selector (tilde) Issue - html

Question

I'm trying to modify named elements in my design. I've simplified the situation as you can see in this fiddle:
http://jsfiddle.net/6THpF/
Simply, when I try to modify one named element from the other, it works, but when I try to do the same modification from the opposite direction (other element) it does not work.
Here is the sample code:
body{
background-color:lightgrey;
}
#div_one, #div_two{
background-color:darkred;
display:block;
width:300px;
text-align:center;
padding:30px;
margin:10px;
color:white;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
#div_one:hover ~ #div_two{
background-color:red;
}
#div_two:hover ~ #div_one{
background-color:red;
}

Answer 1

From MDN:
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
So since div_one is not preceded by div_two the second rule won't work. In other words, there is no "previous sibling" selector.

Answer 2

Try this.I answered:
HTML:
<div id="div_one">This is div 1</div>
<div id="div_two">This is div 2</div>
CSS:
body{
background-color:lightgrey;
}
#div_one, #div_two{
background-color:darkred;
display:block;
width:300px;
text-align:center;
padding:30px;
margin:10px;
color:white;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
JAVASCRIPT:
$(document).ready(function(){
$("#div_one").mouseover(function(){
$("#div_two").css("backgroundColor","blue");
});
$("#div_one").mouseout(function(){
$("#div_two").css("backgroundColor","darkred");
});
$("#div_two").mouseover(function(){
$("#div_one").css("backgroundColor","blue");
});
$("#div_two").mouseout(function(){
$("#div_one").css("backgroundColor","darkred");
});
});
remember that use and embed the jquery.js core to your web page.

Answer 3

I am not solving the sibling selector issue (that I think that can not be solved), but the effect intended.
You need to group both divs in one:
<div>
<div id="div_one">This is div 1</div>
<div id="div_two">This is div 2</div>
</div>
and now target the hover state of the group div:
div:hover #div_two{
background-color:red;
}
div:hover #div_one{
background-color:red;
}
of course the later can be written better, (or shorter) I just wanted to change as little as possible in your example
This has some drawbacks that you may be will need to address.
If you want the divs to have space between them (and this space not responsive to the hover), then I think that you will need to change them to absolute positioning.
see the fiddle
edited
I missed the requirement about not hovering the hovered div. Change css to
div:hover #div_two:not(:hover){
background-color:red;
}
div:hover #div_one:not(:hover){
background-color:red;
}
Now I think it's what you wanted edited fiddle