- 締切済み
HP製作でオーバーマウスがうまくいきません。
現在、Webサイトを製作中なのですが CSSでのオーバーマウスの動作がうまくいきません。 コードは以下の通りなのですが イメージとしては、添付画像の様にA,Bのような画像で作ったボタンがあり そこのボタンにカーソルを合わせると Aのようにボタンの色が変化し 尚且つ、説明欄にAの説明が表示されるようにというイメージなのです。 しかし、実際のところは動作をせず・・・という状態です。 コードで説明しますとはセレクト、ブログ、コンタクトと何項目かあるんですが その場合は一番下のコンタクトしか動作しない状態なのです。 他はリンクタグすら正常に動きません。 思考錯誤をしていたところ 各所にある<ul class="menu">を削除したところ レイアウトは崩れるのですが 動作はしてくれました。 その部分をどのように修正すればいいのか もしくは、もっと根本的な部分から修正が必要なのか お手上げ状態です、ご助言をお願い致します。 contact.png ＞これがメニュー側で contact_un.png ＞これが説明側に表示されるべき画像です。 <html> <head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>タイトル</title> <style type="text/css"> BODY { background-image:url(min.png); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } img { border-style:none; } .menu { padding-top:200px; /*--重ならない程度に押し下げています。--*/ } .menu a span { /*--オンマウスで表れる場所---*/ display:none; /*--最初は隠す。これがキモ。 検索エンジンに嫌われる理由でもある---*/ padding:5px; } .menu a:link{ /*--文字色 マウスを乗せたくなる色を---*/ } .menu a:visited{color:#000;} .menu a:hover, .menu a:visited{ /*--ここから下、%使う時はIEに注意---*/ display:block; text-decoration:none; } .menu a:hover .setumei_s { /*--オンマウスで表れる場所の指定---*/ display:block; position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/ top:350px; left:110px; width:680px; font-weight:bold; line-height:1.5; } .menu a:hover .setumei_b { /*--オンマウスで表れる場所の指定---*/ display:block; position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/ top:310px; left:110px; width:680px; font-weight:bold; line-height:1.5; } .menu a:hover .setumei_c { /*--オンマウスで表れる場所の指定---*/ display:block; position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/ top:270px; left:100px; width:680px; font-weight:bold; line-height:1.5; } .menu a:hover .second { /*--オンマウスで表れる場所の指定---*/ top:600px; left:5px; width:23px; }summary_un #image a{ display:block; background:url() no-repeat; text-decoration:none;} #image a:hover{ color:orange; background:url(info_on.png) no-repeat; } </style> </head> <body style="background-color: rgb(0, 0, 0); margin-top: 0px; height: 27px; background-image: url(back.jpg);"> <!---セレクト--> <div style="position: absolute; top: -10px; left: -20px; width: 600px; height: 87px;" id="image"> <ul class="menu"> <a href="リンク"><img src="Mission.png"> <span class="setumei_m"><img src="Mission_un.png"></span></a> </ul> </div> <!---セレクト--> <!---ブログ--> <div style="position: absolute; top: 31px; left: -20px; width: 600px; height: 87px;" id="image"> <ul class="menu"> <a href="リンク/"><img src="blog.png"> <span class="setumei_b"><img src="blog_un.png"></span></a> </ul> </div> <!---ブログ--> <!---コンタクト--> <div style="position: absolute; top: 70px; left: -20px; width: 600px; height: 87px;" id="image"> <ul class="menu"> <a href="リンク"><img src="contact.png"> <span class="setumei_c"><img src="contact_un.png"></span></a> </ul> </div> <!---コンタクト--> </body> </html>
- みんなの回答 （3）
- 専門家の回答
補足
お世話になります、質問者です。 アドバイスありがとうございます。 リンクのボタンのサイズなのですが477*39になります。 また、2点目の説明画像のサイズは何パターンかあり それぞれがサイズが異なるのですが380ｘ100程度のものです。 位置ですが、どのように表記すればよいのかわからないので サイトのURLを添付いたします。 こちらがそのサイトです。 http://urx.nu/1z0X