Changer la couleur d'une cellule d'un tableau au passage de la souris en html

Published: 27 mars 2015

DMCA.com Protection Status

Exemple de comment changer la couleur d'une cellule d'un tableau au passage de la souris en utilisant onmouseover, illustration

Changer la couleur d'une cellule d'un tableau au passage de la souris en html (Exemple 1)
Changer la couleur d'une cellule d'un tableau au passage de la souris en html (Exemple 1)

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Test Table Cell Over</title>
    </head>
<body>

 <table style="width:100%;">
  <tr>
    <td onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">Bob</td>
    <td>Bill</td>
    <td>Boule</td>
  </tr>
  <tr>
    <td>12</td>
    <td>23</td>
    <td>14</td>
  </tr>
</table>

</body>
</html>

Autre exemple en définissant le css dans l'entete de la page html:

Changer la couleur d'une cellule d'un tableau au passage de la souris en html (Exemple 2)
Changer la couleur d'une cellule d'un tableau au passage de la souris en html (Exemple 2)

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Test Table Cell Over</title>
<style style="text/css">
    .hoverCellTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverCellTable td{ 
        padding:10px; border:#000000 1px solid;
    }
    .hoverCellTable td{
        background: #FFFFFF;
    }
    .hoverCellTable td:hover {
          background-color: #EEEEEE;
    }
</style>    
    </head>
<body>

 <table class="hoverCellTable">
  <tr>
    <td>Bob</td>
    <td>Bill</td>
    <td>Boule</td>
  </tr>
  <tr>
    <td>12</td>
    <td>23</td>
    <td>14</td>
  </tr>
</table>

</body>
</html>

Recherches associées

Image

of