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

Active 27 mars 2015    /    Viewed 2904    /    Comments 0    /    Edit


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)

<!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)

<!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

Liens Site
onmouseover Event w3schools
Highlight Table Row using CSS textfixer
CSS Tables w3schools
HTML Tables w3schools
Changing Table Background Colors on Mouseover (IE ONLY) web-source
Navigate through table rows using the keyboard arkanis


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!