0

私は3つのdivを持っています。「メイン」/「最初の」divにカーソルを合わせたときに、これらのdivのうち2つでいくつかのものを変更したいと思います。ここでは、Javascript/jQuery の使用を避けようとしています。

少し前にそれについて読んだことを漠然と覚えていますが、リンクを再び見つけることができず、おそらく正しい用語を使用していない可能性があるため、以前の検索は役に立ちませんでした.

コードは次のとおりです: HTML:

<div id=one></div>
<div id=two></div>
<div id=three></div>

CSS:

#one{background-color:blue;width:50px;height:50px;float:left;}
#two{background-color:green;width:50px;height:50px;float:left;}
#three{background-color:red;width:50px;height:50px;float:right;}

#one:hover > #two + #three { background-color: yellow; }

誰か助けてくれませんか？最初の div にカーソルを合わせると、他の2 つのdiv の色が変わるようにするにはどうすればよいですか?

4

2 に答える 2

5

こんな感じですか？

フィドル

#one:hover ~ #two , 
#one:hover ~ #three  
{ background-color: yellow; }

問題は、>それが直接の子孫セレクターであり、セレクターとの組み合わせが機能し+ないことです。

于 2013-05-21T01:49:13.060 に答える
2

知っておくべきことが 2 つあります。

まず、1 つの「ルール」で ID によって 2 つの要素を選択することはできません。カンマを使用する必要があります。

2 つ目は、の子とそのすぐ隣>の子を意味します。+したがって、あなたのルールは次のことを意味します：

#one
    #two //Children of #one
    #three //the selected one (children on #one)

ルールは次のようになります。

#one:hover ~ #two, #one:hover ~ #three { background-color: yellow; }
于 2013-05-21T01:50:17.397 に答える