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>
補足
回答ありがとうございます。早速やってみましたが、空白のままでした。 他にも、回答をヒントに、 a:link1.link{ a:link.hover{ 等、：を.に変えてみたり、link1の場所を変えてみたりしましたが空白のまま画像がでませんので 引き続きわかる方いらしたら、教えて下さい。