Hover over one div, change color of another but fade out all divs that aren't hovered on

Question

I've trimmed down what im trying to achieve so its easier to follow.

Ok so i have three divs as follows (All aligned horizontally)

<div id="MainGrid">
    <div id="Row1">
        <div id="row1floatleft">
        </div>
        <div id="row1floatRight">
        </div>
        <div id="row1floatMiddle">
        </div>
    </div>
</div>

When I mouse over row1floatleft it changes the background color of row1floatmiddle this is working perfectly, the problem im having is trying to fade out the row1floatright div

this is my css

#MainGrid
{

 width:900px;
 margin:0 auto;
 border:1px solid black;   
}

#Row1
{
 width:900px;
 margin:0 auto;
 border:1px solid blue;   
}

#row1floatleft
{
width:299px;
float:left;
height:150px;
border:1px solid red;
background-color:Red;
}

#row1floatRight
{
width:299px;
float:right;
height:150px;
border:1px solid yellow;
background-color:Yellow;
}

#row1floatMiddle
{
width:299x;
height:150px;
border:1px solid green;
background-color:Green;
}

#row1floatleft:hover ~ #row1floatMiddle
{
background-color:Blue;
}

I'm trying to replicate this http://www.virgin-atlantic.com/us/en/the-virgin-experience.html

So i mouse over the row1floatleft it changs the back ground color of row1floatMiddle but needs to fade out all other divs that aren't hovered on, I've tried not(:Hover)

#row1:not(:Hover)
{
background-color:Orange;
}

but that doesnt interact with the

  #row1floatleft:hover ~ #row1floatMiddle
{
background-color:Blue;
}

any help would be highly appreciated.

Answer 1

I've created a fiddle here: http://jsfiddle.net/fLJZv/1/

There was an error in your css:

#row1floatMiddle
 {
   width:299x;
 }

Missing the 'p' for pixels.

I've added some more CSS:

#row1floatMiddle
  {
     margin: 0 0 0 299px;
  }

And

#row1floatleft:hover ~ #row1floatMiddle
{
opacity: 0.5;
}
#row1floatleft:hover ~ #row1floatRight
{
opacity: 0.5;
}

The fiddle (at least) now works . . .