マウスカーソル位置のセルの左端のみをハイライトするCSS
今日のネタもとはココ: カーソル位置のセルの上端と横端をハイライトする JavaScript
たぶん、「マウスオーバーしたトコのセルについて、その上端と左端のセルをハイライトするJavaScript」なんだと思います。何で「だと思います」かというと、JavaScriptはオフにしてるもので。確かめるのがめんどくさいのだ。
で、たいへんすばらしいワザなので、まねさせていただくコトにしました。といっても、前述のとおりJavaScriptはオフにしてるので、CSSのみでやってみようと思います。
たださすがにCSSでまったく同じコトはできないので、制限を付けます。
- ハイライトするのは左端のセルのみ。上端のセルはJavaScript使わないとたぶん無理じゃないかと*1。
- colspanやrowspanはナシ。
- ハイライトの対象はtbody内のみ。theadとかtfootではハイライトさせない。
CSSはこんな感じ。
tbody>tr:hover>th:first-child, tbody>tr:hover>td:first-child {
background: xxx; /* xxxを設定したい背景色にする */
}簡単に説明すると、「『tbodyの子要素のうち、マウスカーソルがホバーしたtr要素について、その最初の子要素thまたはtd』の背景色をxxxにする」といったところでしょうか*2。…わかりにくいですねぇ。
あとはこんな感じの(X)HTMLを用意します。
<table summary="ハイライトのテスト">
<caption>ハイライトのテスト</caption>
<colgroup><col /></colgroup>
<colgroup><col span="4" /></colgroup>
<thead>
<tr>
<th />
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<th>2</th>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<th>3</th>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<th>4</th>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</tbody>
</table>実際にやってみます*3。
| A | B | C | D | |
|---|---|---|---|---|
| 1 | A1 | B1 | C1 | D1 |
| 2 | A2 | B2 | C2 | D2 |
| 3 | A3 | B3 | C3 | D3 |
| 4 | A4 | B4 | C4 | D4 |
ブラウザの対応状況ですが、こんな感じになるのではなかろうかと。いいかげんでごめんなさい。
| ブラウザ | 対応状況 | 備考 |
|---|---|---|
| IE | 対応してない | 7.0で対応する可能性アリ |
| Firefoxとか | 対応してるハズ | 1.5で確認済み |
| Opera | 対応してるらしい | id:danpaletaさんthx |
| Safari | 対応してるらしい | id:danpaletaさんthx |
IE6には対応してませんが、IE7は対応してるかもしれません。任意の要素で:hoverが使えるようになるなど、CSSへの対応がかなり強化されるようですので期待してます。
