將鼠標懸停在一個div上，更改另一div的顏色，但淡出未懸停在其上的所有div

Question

我已經縮小了即時通訊要實現的目標，因此易於遵循。

好的，所以我有以下三個div（全部水平對齊）

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

當我將鼠標懸停在row1floatleft上時，它更改了row1floatmiddle的背景顏色，因此效果很好，我遇到的問題是試圖淡出row1floatright div

這是我的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;
}

我正在嘗試復制此http://www.virgin-atlantic.com/us/en/the-virgin-experience.html

所以我將鼠標懸停在row1floatleft上，它改變了row1floatMiddle的背景色，但是需要淡出所有其他沒有懸停的div，我沒有嘗試過（：Hover）

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

但這與

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

任何幫助將不勝感激。

Answer 1

我在這里創建了一個小提琴： http : //jsfiddle.net/fLJZv/1/

您的CSS發生錯誤：

#row1floatMiddle
 {
   width:299x;
 }

缺少像素的“ p”。

我添加了更多CSS：

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

和

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

提琴（至少）現在可以工作了。 。 。