日々夢想

つれづれなるままに　ひぐらし　すずりにむかいて　

マウスオーバーしたテーブルセルと同一列の色変更

サイトを見ていて気になったデザインがあったので、腕試しに実装。
・・・実装してみたら意外とさっくりいきました。
tr:hover,td:hoverでスタイル指定して実現しています。

仕様

マウスオーバーしたセルの背景色と文字色を変更。
さらに、同一行のセルの背景色を変更。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>none</title>
<style>
tr:hover {
  background-color:#ccc;
}
td:hover {
  color:#fff;
  background-color:#000;
}
</style>
</head>

<body>
<table>
  <tr><td>A-1</td><td>A-2</td><td>A-3</td></tr>
  <tr><td>B-1</td><td>B-2</td><td>B-3</td></tr>
  <tr><td>C-1</td><td>C-2</td><td>C-3</td></tr>
</table>
</body>
</html>