-PR-
締切済み

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

  • 暇なときにでも
  • 質問No.3417300
  • 閲覧数6214
  • ありがとう数1
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 11% (88/769)

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でできた方がスマートかなと思うので、可能であればその方法を使いたいです。
通報する
  • 回答数3
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全3件)

  • 回答No.2
レベル14

ベストアンサー率 34% (944/2776)

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

<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.3
レベル14

ベストアンサー率 66% (1052/1578)

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

また、IEは7から実装(IE6以前、IE7・互換モードでは動作しません。)
  • 回答No.1
レベル14

ベストアンサー率 54% (1660/3060)

できません。
このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-

特集


専門家があなたの悩みに回答!

ピックアップ

ページ先頭へ