2/2 マウスが乗った行だけ装飾を変化させる [ホームページ作成] All About

マウスの乗っている行の色を変化させるソース

下記の表は、Firefox、Opera、Internet Explorer 7 以降などのブラウザで閲覧すると、マウスを乗せた行の色が変化します。

タイトル	巻	出版社	作者	発刊日	定価
月詠 -Moon Phase-	11	ワニブックス	有馬啓太郎	2006/03/25	903円
Rozen Maiden	6	幻冬舎	PEACH-PIT	2006/01/24	620円
涼宮ハルヒの憂鬱	1	角川書店	谷川流	2003/06/03	540円
魔法先生ネギま!	14	講談社	赤松健	2006/04/17	410円

このような表を実現するためのソースは、下記のようなものです。

▼表を作るHTML

<table cellspacing="0" cellpadding="0" class="sample">

<tr><th>タイトル</th><th>巻</th><th>出版社</th><th>作者</th><th>発刊日</th><th>定価</th></tr>

<tr><td>月詠 -Moon Phase-</td><td>11</td><td>ワニブックス</td><td>有馬 啓太郎</td><td>2006/03/25</td><td>903円</td></tr>

<tr><td>Rozen Maiden</td><td>6</td><td>幻冬舎</td><td>PEACH-PIT</td><td>2006/01/24</td><td>620円</td></tr>

<tr><td>涼宮ハルヒの憂鬱</td><td>1</td><td>角川書店</td><td>谷川 流 </td><td>2003/06/03</td><td>540円</td></tr>

<tr><td>魔法先生ネギま!</td><td>14</td><td>講談社</td><td>赤松 健</td><td>2006/04/17</td><td>410円</td></tr>

</table>

ほとんど特に説明する箇所のない普通の表（table）です。スタイルシートで「この表だけ」を装飾できるよう、class属性を使ってクラス名「sample」を付加してあります。

▼スタイルシート

<style type="text/css">

   /* ▼表の装飾（※今回の本題とは無関係の装飾） */

   table.sample { border-collapse: collapse; border: 2px solid black; }

   table.sample th { font-size: 80%; padding: 2px; border-color: #000000 gray; border-style: solid dashed double dashed; border-width: 2px 1px 3px 1px; background-color: #eeeeee; }

   table.sample td { font-size: 80%; padding: 2px; border-color: gray; border-style: solid dashed; border-width: 1px; }

   /* ▼今回の本題：行にマウスが乗ったときの装飾 */

   table.sample tr:hover { background-color: #ffcccc; color: #808080; }

</style>

「 tr:hover 」として、tr要素（表の1行を構成する要素）に対して、「マウスが上に乗ったとき」の装飾を記述しています。
もし、「 td:hover 」と書けば、td要素（表のセル1つ1つを構成する要素）に対して、マウスが乗ったときの装飾を記述できます。

上記の例では、tr要素に対するhover疑似クラスを使って、「tr要素の上にマウスが乗ったときに色を変える（＝表の「行」の上にマウスが乗ったときに色を変える）」という装飾になっています。このとき、行を構成する各セル（td要素）に対して既に色が指定されている場合、そこの色は変化しません。この方法を使うときは、行を構成する各セルには背景色や文字色を指定しないように注意して下さい。