【CSS】マウスカーソルが乗るとテーブル行の色が変わる

投稿日時: 投稿者:

CSSだけでマウスカーソルが乗るとテーブル行の色が変わるシステム開発備忘録です。
ほんの少しのコーディングの差で変わらないケースも有ります。
例えば、tdを付けてしまってtdの背景色を変えていて、Trの背景色が変わらないとか。。。
なので間違いやすいケースも載せておきます。

まずは、正常に背景色が変わる場合

<html>
<head>
  <style>
    #tableA tr:nth-child(odd) {  
      background-color: #FF8888;
    }  
    #tableA tr:nth-child(even) {  
      background-color: #88FF88;  
    }  
    #tableA tr:hover {
      background-color: #e5e5e5;	/* 行の背景色style="background-color: #FF8888;" */
    }
  </style>
</head>
<body>
  <table id="tableA">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
  </table>
</body>
</html>

下のテーブルはマウスカーソルが乗ると行の背景色が変わります。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

変わらないケース（１）
styleで#tableB tr:nth-child(odd) tdのようにtdで背景色を付けた場合は上手く行きません。
以下をコピペして適当な名前で保存して試してみると変更されないことがわかります。

<html>
<head>
  <style>
    #tableB tr:nth-child(odd) td {  
      background-color: #FF8888;  
    }
    #tableB tr:nth-child(even) td {  
      background-color: #88FF88;  
    }  
    #tableB tr:hover {
      background-color: #e5e5e5;	/* 行の背景色 */
    }
  </style>
</head>
<body>
  <table id="tableB">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
   </table>
  </body>
</html>

上のソースを動かしても、テーブルにマウスカーソルが乗っても行の背景色が変わりません。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

変わらないケース（２）
trタグの中のstyleで直接背景色を付けた場合も上手く行きません。
以下をコピペして適当な名前で保存して試してみると変更されないことがわかります。

<html>
<head>
  <style> 
    #tableA tbody tr:hover {
      background-color: #e5e5e5;	/* 行の背景色 */
    }
  </style>
</head>
<body>
  <table id="tableA">
    <tbody>
      <tr style="background-color: #FF8888;">
        <td>セルA1</td><td>セルA2</td><td>セルA3</td>
      </tr>
      <tr style="background-color: #88FF88;">
        <td>セルB1</td><td>セルB2</td><td>セルB3</td>
      </tr>
      <tr style="background-color: #FF8888;">
        <td>セルC1</td><td>セルC2</td><td>セルC3</td>
      </tr>
      <tr style="background-color: #88FF88;">
       <td>セルD1</td><td>セルD2</td><td>セルD3</td>
      </tr>
      <tr style="background-color: #FF8888;">
        <td>セルE1</td><td>セルE2</td><td>セルE3</td>
      </tr>
     </tbody>
   </table>
  </body>
</html>

上のソースを動かしても、テーブルにマウスカーソルが乗っても行の背景色が変わりません。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

ほんの少しのコーディングの違いですが、上手く背景色が変わる場合と変わらない場合が有るので、変わらない場合は良くチェックしてみてください。

以上、CSSだけでマウスカーソルが乗るとテーブル行の色が変わるシステム開発備忘録でした。