CSSの小技として、表(テーブル)の行の色をマウスカーソルに合わせて動的に変える方法です。
大きな表(テーブル)では、マウスカーソルに合わせて行の背景色を変えられるようにする事で、データを読み易くする事が出来ます。
この方法は簡単で、:hover擬似クラスを利用します。
この方法は、当然ながら、ネットスケープ 4.xでは不可能です。
実際のCSSでは以下のようになるでしょう。
tr:hover {background: #d0ffd0;}
この場合、表内の全ての行に有効になりますが、特定の範囲にのみ有効としたいのであれば、<tbody>要素に適切なクラスを与えたセレクタを併用すると良いでしょう。
実際に対応しているユーザエージェントで表示させると、以下のようになります。
ところで、:hover擬似クラスを列に対して適用しようとして、<colgroup>要素や<col>要素に付けても効果はありません。
これはなぜでしょうか。
CSS第二水準の仕様書には、:hover擬似クラスに関して以下のように解説されております。
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.
つまり、
と言う事になります。
<colgroup>要素や<col>要素は列をグループ化するための要素ですが、実際にグループ化される列はこれらの要素の外にあります。
或いは<colgroup>要素や<col>要素で生成される領域は存在しないとも言えます。
存在しない領域に対する:hover擬似クラスは、意味が無いものとなるのでしょう。
<colgroup>要素及び<col>要素以外に、列をグループ化する要素は存在しません。従って列に対して行と同様の方法を行う事は不可能となるのです。
堀北真希ちゃんがボシュロム社ソフトコンタクト用品TVCMに出演した事に因んで描いた、コンタクトレンズを着けている堀北真希うさぎ
