0

私が達成しようとしていることを削減したので、従いやすくなりました。

わかりましたので、次のように3つの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;
}

どんな助けでも大歓迎です。

4

1 に答える 1

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;
}

フィドル（少なくとも）が機能するようになりました。. .

于 2013-10-17T09:08:10.273 に答える