css - 将鼠标悬停在一个 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，我试过 not(:Hover)

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

但这不与

交互

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

如有任何帮助，我们将不胜感激。

Answer 1

我在这里创建了一个 fiddle :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;
}

fiddle (至少)现在可以使用了。 . .