:hoverで他の要素の値を変更できますか？

質問

CSSで擬似要素「:hover」をつけることで従来Javascriptで行なわれていたオンマウス処理を実現することができますが、オンマウスした要素以外の要素に別のスタイルを適用することって可能でしょうか？

＜html＞
<div id="one">one</div>
<div id="two">two</div>

＜CSS＞
#one:hover {
color: red;
}

上の例では#oneがオンマウスすると文字色がredに変化しますが、同時に#twoの文字色をblueにしたいのです。無理ならJavascriptで代用しますが、オンマウス処理みたいにCSSでできた方がスマートかなと思うので、可能であればその方法を使いたいです。

回答No.3

steel_gray

例題どおりなら…
#one:hover + #two{
color: red;
}
one と two が隣接している場合に限ります。
http://msugai.fc2web.com/web/CSS/selector.html#adjacent

また、IEは7から実装（IE6以前、IE7・互換モードでは動作しません。）

回答No.2

SAYKA

離れてると無理だけど　これじゃだめ？

<div id="zero">
　<div id="one">one</div>
　<div id="two">two</div>
</div>

#zero:hover #one { color:red; }
#zero:hover #two { color:blue; }

回答No.1

himajin100000

できません。