マウスオーバー時の画像と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は真っ白のまま何も表示されません。

何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、
困っております。

どうか智恵をお貸し下さい。宜しくお願いします。

No.1 回答者： kobliha 回答日時： 2014/03/14 17:12

a:link.link1{

a:hover.link1{
でなく
a.link1:link{
a.link:hover{
とすれば働かないか。

この回答への補足

回答ありがとうございます。早速やってみましたが、空白のままでした。
他にも、回答をヒントに、

a:link1.link{
a:link.hover{

等、：を.に変えてみたり、link1の場所を変えてみたりしましたが空白のまま画像がでませんので
引き続きわかる方いらしたら、教えて下さい。

補足日時：2014/03/14 22:42