CSS3 badge

テーブル要素の任意の行にマウスカーソルを合わせたとき、他の行がボカされて、フォーカスした部分が目立つように切り替わるCSSのテクニックを紹介します。

サンプルは下記のURLより。

SAMPLE : https://on-ze.com/demo/css-table-blur/

HTML

まずはhtmlの記述ですが、こちらは通常どおり、特に変わったことはしません。

<table>
	<thead>
		<tr>
			<th>Title</th>
			<th>Size</th>
			<th>Description</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sample Title</td>
			<td>123</td>
			<td>sample Text/td>
		</tr>
		……
	</tbody>
</table>

CSS

続いてはキモとなるスタイルシートの記述です。

table {
	background: #f5f5f5;
	border-collapse: collapse;
	color: #555;
}

th {
	background:  #444;
	color: #fff;
	padding: 12px 16px;
}

td {
	padding:12px 16px;
	transition: all 0.3s;
}

tbody:hover td {
/* マウスホバーで全ての行をボカす */
	color: transparent;
	text-shadow: 0 0 3px #aaa;
}
 
tbody:hover tr:hover td {
/* フォーカスしている行だけ通常表示に戻す */
	color: #555;
	text-shadow: 0 1px 0 #fff;
}

上記コード内に記述しているとおり、ポイントはテーブル要素にマウスオーバーしたときに、一旦すべての行をボカしてしまう点です。
そして tbody:hover tr:hover td {} で任意の行にフォーカスしたときに元の表示に戻す処理を記述しています。

また今回はボカし効果を加える際に filter: blur; を使わずに text-shadowで実装しました。

ちょっとしたテクニックですが、任意の要素をハイライトさせたいときなど、応用も利くので覚えておくと便利ですよ！

SAMPLE : https://on-ze.com/demo/css-table-blur/