ホームページリニューアルを専門に格安でご提供。

リンクに背景色や背景画像を指定してロールオーバー効果（カーソルをのせると画像が変わるアレ） をやろうというものです。バリエーションが豊富なのでいくつかに分けて紹介します。
javascriptなしでもここまでできるんです！

一番シンプルな例

次のようなスタイルシートを書いて、適用させたいaタグにclass設定をするだけです。

a.sample{
    background-color:#FFFFB0;
}
a:hover.sample{
    background-color:#FFCC99;
}

ただ背景色を指定しただけです。a:visitedを追加して背景色を変えてもいいかもしれません。

余白をつけてみました

余白をつけるためにpaddingを加えてみました。

a.sample1{
    background-color:#FFFFB0;
    padding:0.5em 1em;
}
a:hover.sample1{
    background-color:#FFCC99;
}

paddingの値はお好みで。

幅をそろえて余白をつけてみました

幅を固定するといえばwidthとheightですね

a.sample2{
    display:block;
    background-color:#FFFFB0;
    padding:0.5em 1em;
    width:100px;
    height:15px;
}
a:hover.sample2{
    background-color:#FFCC99;
}

注目して欲しいのはdisplay:block;です。これを忘れてはいけません。

なぜかというと、インライン要素にwidthやheightを指定しちゃいけないことになっているから。aタグはインライン要素なので、display:block;を使ってブロック要素にしてあげる必要があります。