html - CSS のみ - 兄弟の上に :hover すると、最初の要素の色が変わる

Question

CSSだけで解決したい

ここに 3 つの円があります。

クラス名 Mycircle の円にマウスオーバーすると、クラス名 BigCircle の円が赤色に変わります

html

<div class="BigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>

CSS

.mycircle,.BigCircle{width:50px; height:50px; border-radius:30px; background-color:grey; margin:3px}
.mycircle:hover{background:yellow}

.mycircle:hover .BigCircle{background:red}

デモはこちら > http://jsfiddle.net/JGbDs/4/

前もって感謝します

Answer 1

いいえ。css だけではできません。「任意の兄弟」セレクターは css にありません。

ただし、BigCircle を末尾に移動できる場合は、後続の兄弟を選択できる一般的な兄弟コンビネータを使用できます。

.mycircle:hover ~ .BigCircle{background:red}