WEB制作テクニック

ボタンのロールオーバー
擬似クラスを使い、リンク上にマウスのポインタがきたに背景画像を変更するという処理です。
idやクラスを用い、指定した部分のリンクタグのみ適用されるようにします。



以下はソースです。灰色の部分が説明です。
ヘッダー内に記述し、位置固定したい要素にidをつけてください。 
<style type="text/css">
/*idがbuttonのリンクタグを修飾しています*/
#button_m a{
/*文字を中央寄せしてます*/
  text-align:center;
  display: block;
/*画像のサイズを指定しています*/
  width: 197px;
/*フォントサイズを指定しています*/
  font-size: 12px;
/*リンクのアンダーラインを消しています*/
  text-decoration:none;
/*文字がボタンの中央に行くように設定しています*/
  padding: 10px 12px 10px 12px;
/*文字の色を設定*/
  color: #FF9933;
/*背景画像（ボタン）のアドレスを設定*/
  background:url(img/n1.gif) no-repeat;
}
/*マウスがリンク上にある時の処理です。変更点だけ記述すればOKです*/
#button_m a:hover{
/*文字の色を設定*/
  color: #FF6600;
/*背景画像（ボタン）のアドレスを設定*/
  background:url(img/n2.gif) no-repeat;
}
</style>
参考サイト（外部サイトです）
　WEB工房きくちゃん(CSS)
　http://www.stylish-style.com/csstec/csstec-top.html
※ロールオーバーリンクの項目を参考にしてください


上へ