2010年06月07日

スタイルシートで、指定したクラスのみマウスオーバー時の色を変える

 記述方法でしばし悩んだので覚書。

 やりたい事は、マウスをリンクの上に重ねたら色と背景色を変えたい。ただし、HTML全体じゃなく、指定箇所のみそんなふうにしたい、ってことだ。そして、スタイルシートを別ファイルで用意する形で実現したい。

 色々調べたり試行錯誤した結果、スタイルシート内でタグ名.クラス名:hover{} で、マウスオーバー時のスタイルを指定し、HTML内のaタグで「class=」でクラス名を指定すればOKのようだ。

 下の例では、a.pagenumberに共通部分を設定し、link,visited,hoverでそれぞれ色と背景色を変えている。

 ただし、「link,visited」のあとに「hover」を記述するという順番を守った方が無難っぽい。

参考)実は重要!スタイルシートの記述順! a:hover使ってもリンク無変化!? - [ホームページ作成]All About

スタイルシート例

a.pagenumber{
 float: left;
 width: auto;
 padding-top: 3px;
 padding-right: 5px;
 padding-bottom: 3px;
 padding-left: 5px;
 margin-right: 3px;
 margin-left: 3px;
}

a.pagenumber:link,
a.pagenumber:visited{
 color: #FFFFFF;
 background-color: #33FF99;
}


a.pagenumber:hover{
 color: #FFFFFF;
 background-color: #339999;
}

 HTML例

  <a class="pagenumber" href="/?p=0">1</a>
  <a class="pagenumber" href="/?p=1">2</a>
  <a class="pagenumber" href="/?p=2">3</a>
  <a class="pagenumber" href="/?p=3">4</a>
  <a class="pagenumber" href="/?p=4">5</a>

 #idname など、#で始まる記述は、タグ内で「id=」として使うものっぽいがよくわからない。実際に試してはいないが、たぶんこうじゃないかみたいなメモを残しておいて後で試そう。

--

スタイルシート内で以下のように定義

#dot{

....

}

#top{

....

}

HTMLで以下のように指定

<a class="pagenumber" id="dot">・・・</a>
<a class="pagenumber" id="top">トップページ</a>

これで基本pagenumberクラスのスタイルを持ちながらも、#dotや#topで記述した部分だけスタイルを上書き?してバリエーションを持たせるために使うんだと思う。


関連:



Windows XPで、wuauclt.exe(Windows Updateのプロセス)を軽くする 次 | 前 iPadの電子書籍をPDFから作ってみる(失敗編)
Posted by kabuki at 2010年06月07日 09:59
  はてなブックマーク - スタイルシートで、指定したクラスのみマウスオーバー時の色を変える    この記事にTwitterでつぶやく