web-dev-qa-db-fra.com

Comment mettre en surbrillance une ligne de tableau en survol en utilisant CSS uniquement?

Est-il possible de surligner une ligne de la table en survol (quelque chose comme this ) en utilisant uniquement CSS (sans JavaScript)?

htmlcss
32
demas

Oui, une ligne est possible mais pas une colonne.

tr:hover {
  background-color: lightyellow;
}
58
Emil Vikström

Oui c'est possible mais vous devez vous soucier de la compatibilité du navigateur, voici un exemple 

<style type="text/css">
    .tbl {width: 640px;}
    .tbl tr {background-color: Blue; height: 24px}
    .tbl tr:hover {background-color: Red;}
</style>


<table class="tbl">
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>
3
Ahmed Magdy
<style type="text/css">
   tr.tr-hover-class:hover {
      background: grey !important;
   }
</style>

<table>
   <tr class='tr-hover-class'></tr>
</table>
2
ak-j

Dans ce cas, vous l'ajouteriez à une ligne de tableau à l'aide d'une règle de feuille de style, comme dans l'exemple de code CSS ci-dessous:

    tr:hover {
      background-color: #ffff99;
    }

Exemple complet:

  	.hoverTable{
		width:100%; 
		border-collapse:collapse; 
	}
	.hoverTable td{ 
		padding:7px; border:#4e95f4 1px solid;
	}
	/* Define the default color for all the table rows */
	.hoverTable tr{
		background: #b8d1f3;
	}
	/* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }
<table class="hoverTable">
	<tr>
		<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
	</tr>
	<tr>
		<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
	</tr>
	<tr>
		<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
	</tr>
</table>

1
Xaib Aslam