マウスオーバー時の画像とCSSについて
久しぶりにHTMLをいじってたんですが、すっかり忘れちゃって
色々見てみたんですが、解決しなかったので教えて下さい。
indexと同じディレクトリにdesignというフォルダを作り中にmouse_over.cssという
カスケードスタイルシートを作りました。
"mouse_over.css"の内容は
a:link.link1{
display:block;
width:100px;
height:25px;
background-image:url(./home.png);
text-indent:-10000px;
list-style:none;
}
a:hover.link1{
display:block;
width:100px;
height:25px;
background-image:url(./home_over.png);
text-indent:-10000px;
list-style:none;
}
です。それと、上同ディレクトリにpicというフォルダを作り、homeとhome_overという2種類の画像を入れてあります。indexには、head内に
<link rel="stylesheet" type="text/css" href="design/mouse_over.css" />というリンクを張り、
body内に<a href="リンク先URL" class="link1"></a>としましたが、画像が出ません。
上記のCSSをindex内に<style>括りで書くと、画像も表示されちゃんとマウスオーバーで
画像が変わるのですが、CSSを別に置くとindexは真っ白のまま何も表示されません。
何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、
困っております。
どうか智恵をお貸し下さい。宜しくお願いします。
お礼
その方法で解決しました！ ご回答ありがとうございました。