• 締切済み

ロールオーバーの上にz-index

html4です。クラスboatの画像を最前面にもってきたいのですが、この3つのクラスのナビの上に重ねるとロールオーバーが反応しなくなりました。boatのz-indexを3から1にするとロールオーバーは反応するのですが、ナビよりも後面にきてしまうためできません。どのようにすればよいでしょうか? .navi { position:absolute; top:704px; left:238px; z-index: 1; } .navil { position:absolute; top:702px; left:353px; z-index: 1; } .navilast { position:absolute; top:708px; left:474px; z-index: 1; } .boat { position:absolute; top:-229px; left:-430px; z-index: 2; }

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

セレクタの書き方が間違っています。 ※W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) はすでに回答してあります。  HTMLとCSSの文法チェックをまずしてそれを直してください。  セレクタの書き方もサンプルでよく理解してください。 ・基点セレクタと、それに繫がるセレクタの書き方 ・詳細度の計算と、カスケーディング  それらを理解しておかないと、先にはまったく進めませんし、そもそも極めて非効率です。 ※4. CSS2の構文と基本データ型 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html ) ※5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ※6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )  まずサンプルの一つ一つの書き方を理解できるようになってください。 div.footer div.nav{} の意味 div.footer div.nav ol li + li{} の意味 div.footer div.nav ol li:hover ol{} の意味  z-indexなどプロパティは、そのあとです。

wknuuy
質問者

補足

div.に続いてですよね?それならもうやってしまっていて。サンプルよりタグ書いてもらうほうがわかりやすいしそれで今のがうまくいけばなるほどというかんじで私は勉強にもなるんですが・・・・。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

動的な擬似クラスは、他のクラスセレクタと同様、詳細度はb=1ですから上書きされます。 簡単なサンプル・・  わざとdiv.header中のpはz-index:2にしてあります。:hover擬似クラスで-1=1になります。  一方プルダウンメニューはz-index:1ですが、これにhoverすると2になります。 ★Another HTML-lint 5 ( http://www.htmllint.net/ ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ※タブは_に置換してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> _<title>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css"> <!-- div.footer div.nav{position:absolute;top:100px;left:0;width:100%;} div.footer div.nav ol,div.footer div.nav ol li{ _list-style:none;margin:0;padding:0;line-height:30px; _text-align:center; } div.footer div.nav ol{ _display:block;width:80%;margin:0 auto;position:relative; _height:30px;z-index:1;/*★*/ } div.footer div.nav ol li{ _width:24%;display:inline-block;background-color:yellow; _position:relative; } div.footer div.nav ol li ol{ _width:100%;position:absolute;top:30px;height:auto;display:none; } div.footer div.nav ol li+li{border-left:solid 2px gray;} div.footer div.nav ol li ol li{border:none;} div.footer div.nav ol li:hover ol{display:block;} div.footer div.nav ol li ol li{width:100%;display:block;background-color:red;} div.header{height:100px;margin-bottom:200px;} div.header p{ _position:absolute;position:absolute;top:110px;left:0; _width:100%;height:200px; _background-color:aqua; _z-index:2; /* ★ */ } div.header p:hover{z-index:-1;} /* ★ */ div.footer div.nav ol:hover{z-index:2;} /* ★ */ --> _</style> </head> <body> _<div class="header"> __<h1>タイトル</h1> __<p>このページでは・・・・</p> _</div> _<div class="section"> __<h2>見出し</h2> __<p>・・・</p> _</div> _<div class="footer"> __<div class="nav"> ___<ol> ____<li><a href="/">TOP</a></li> ____<li><a href="/product">製品</a> _____<ol> ______<li><a href="/product/tool">作業工具</a></li> ______<li><a href="/product/tool2">先端工具</a></li> ______<li><a href="/product/tool3">荷役用品</a></li> _____</ol> ____</li> ____<li><a href="/profile">Profile</a></li> ____<li><a href="/contact">Contact</a></li> ___</ol> __</div> __<h2>文書情報</h2> __<dl class="documentHistry"> ___<dt id="FIRST-PUBLISHED">First Published</dt> ___<dd>2012-08-10</dd> ___<dt id="LAST-MODIFIED">Last Modified</dt> ___<dd>2012-08-10 12:00:00 (JST)</dd> __</dl> __<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> _</div> </body> </html>

wknuuy
質問者

補足

回答ありがとうございます。やってみましたが、なおりませんでした・・・。画像が4枚もあって、boatの次にナビがあって、そのあとに2枚画像があり、z-indexは1にしています。今の状態だと順番がめちゃくちゃになってしまいます・・・。ロールオーバーが反応すればいいのですが・・。これに付加して書いてほしいです。または他の方法でなにか方法はないのでしょうか。下は変えてみましたがだめだったタグです。 .navi { position:absolute; top:704px; left:238px; hover{z-index:2;} } .navil { position:absolute; top:702px; left:353px; hover{z-index:2;} } .navilast { position:absolute; top:708px; left:474px; hover{z-index:2;} } .boat { position:absolute; top:-229px; left:-430px; hover{z-index:-1;} }

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

出来れば基点となるタイプセレクタを省略しないように div.boatのように書きましょう。.だけだと、CSS2では*.とみなすことになっている。 もしすべて隠れてないなら、動的な擬似クラスでz^indexを変更すると良いでしょう。  

wknuuy
質問者

補足

回答ありがとうございます。すべてdiv.からにしてみましたがロールオーバーできませんでした。 動的な擬似クラスのとはどう記述したらよいでしょうか?z-indexの数字を変えるのだとしたらもうやっていまして変わっていない状況です。

関連するQ&A

専門家に質問してみよう