スタイルシートでロールオーバーの小技を教えてください

質問

スタイルシートでメニューを作りたいのですが、
メニューのボタンは画像にし、マウスをあてると別画像を呼び出す
ロールオーバーはできたのですが以下のような動きは可能ですか？

■・・・デフォルト画像
□・・・ロールオーバーでかわる画像

＜デフォルト＞
■メニューA■
■メニューB■
■メニューC■
┣■メニューC-1■
┣■メニューC-2■
┗■メニューC-3■
■メニューD■
-------------------------
※「メニューC-1」や「メニューC-2」や「メニューC-3」にマウスを
あてたときに、マウスがあたっているメニュー画像と親メニューの
「メニューC」の画像を同時にオールオーバーさせたいのです。

＜「メニューC-2」にマウスをあてる＞
■メニューA■
■メニューB■
□メニューC□
┣■メニューC-1■
┣□メニューC-2□
┗■メニューC-3■
■メニューD■
-------------------------
↑上記のように「メニューC-2」と同時に親の「メニューC」も
オールオーバーさせたいです。

すみませんが、ご教授よろしくお願いいたします。

回答No.2

abril · ベストアンサー

プルダウンメニューを出すタイプであれば、確かにNo.1様のご紹介されている様なposition等をうまく使うことでCSSのみでも実現できるのですが、今回のご質問は：

> 「メニューC-1」や「メニューC-2」や「メニューC-3」にマウスをあてたときに、マウスがあたっているメニュー画像と親メニューの「メニューC」の画像を同時にオールオーバーさせたい

という事ですから、「既に表示されているサブメニューの1アイテムをマウスオーバーするというアクションで、メインメニューの方も併せて挙動（表示）を変える」やり方について…ですよね？

それだと、子要素の方から親要素のスタイルをコントロールする事になるので、CSSだけではできないのではないか…と思います。
サブメニューのonmouseoverのイベントハンドラに対して、メインメニューのスタイルを入れ替えるアクションを呼び出してやる様なJavaScriptを併用するのが早いと思いますが。

<ul class="menu">
<li id="menu_a"><a href="#">■メニューA■</a></li>
<li id="menu_b"><a href="#">■メニューB■</a></li>

<li id="menu_c"><a href="#">■メニューC■</a>

<ul class="submenu">
<li id="menu_c1"><a href="#" onmouseover="（menu_cのスタイルを入れ替える関数を実行）">┣■メニューC-1■</a></li>
<li id="menu_c2"><a href="#" onmouseover="（同上）">┣■メニューC-2■</a></li>
<li id="menu_c3"><a href="#" onmouseover="（同上）">┗■メニューC-3■</a></li>
</ul>

</li>
<li id="menu_d"><a href="#">■メニューD■</a></li>
</ul>

＃ご質問が、No.1様の解釈の方でよろしかったのであれば、無視して頂いて結構です。

お礼

ありがとうございます。
JavaScriptを利用してさらに、上記のコーディングが必要と言うことですね。
ただ、まったくの初心者でして、JavaScriptを調べると付け焼刃では対応できないかと思いました。
わがままなお願いで申し訳ありませんが、私の求めている動きのコードサンプルなどが紹介されているサイトなどあればご教授いただけませんでしょうか・・・

回答No.1

fujillin

その手の解説サイトは沢山ありますので、欄の限られたここよりも検索で調べた方がいろいろな情報が入手できるでしょう。

＜例えば＞
http://www.stylish-style.com/csstec/ultimate/css-roll-1.html

少し違うけど、
http://www.h7.dion.ne.jp/~nuru44/dhtml/menu_bar.html

スクリプトも入っているかも知れないけど、
http://popup.tok2.com/home2/yosiaki/Menu-P7.html