マウスが重なった行の背景色を変更したい

テーブルのセルにマウスポインタがホバーしたときだけ、その行の背景色を変更します。特に列数・行数の多いテーブルを少しでも読みやすくするために効果的です。ポイントは<tr>に適用されるスタイルに「:hover」クラスを追加する点です。<tr>のホバー時にだけ適用させるスタイルを作ることで、行全体の背景色を変更することができます。

セルにホバーしたときのカーソル

セルにテキストが含まれている場合にマウスポインタが重なると、テキスト選択が可能であることを示す「Iビームカーソル」に変わります。

サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8"><!-文字コードを指定->
    <style>
      table{
        border-collapse:collapse;
        width:100%;
        table-layout: fixed;
      }
      
      td,th{
        padding: 6px 20px;
        border: 1px solid #b7b7b7;
      }
      tr:hover{
        cursor: default;
        background: #ecfafc;
      }
      
    </style>
  </head> 
  <body>
      <table>
      <thead>
        <tr>
          <th>年月</th><th>酒井営業所</th><th>小湊営業所</th><th>池田営業所</th>
      </tr>
      </thead>
      <caption>東部営業所の売上一覧</caption>
      <tbody>
          <tr>
              <td>2022/1</td><td>500万円</td><td>2,100万円</td><td>250万円</td>
          </tr>
          <tr>
              <td>2022/2</td><td>1,500万円</td><td>300万円</td><td>3,500万円</td>
          </tr>
          <tr>
            <td>2022/3</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
          </tr>
          <tr>
            <td>2022/4</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
          </tr>
          <tr>
            <td>2022/5</td><td>2,300万円</td><td>,700万円</td><td>1,500万円</td>
          </tr>
          <tr>
            <td>2022/6</td><td>1,500万円</td><td>1,00万円</td><td>500万円</td>
          </tr>
          <tr>
            <td>2022/7</td><td>500万円</td><td>1,700万円</td><td>1,00万円</td>
          </tr>
        </tbody>
      </table>
   </body>
</html>

実行結果

カテゴリー:WEB