Sibling Selector (tilde) Issue

[jamalssj]

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:\[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;}\[/code\]