Colorer l'ensemble de la case en html/css

Résolu/Fermé
bop - 4 juil. 2012 à 11:29
 bop - 4 juil. 2012 à 14:59
Bonjour,

question bête : pourquoi la case du tableau ne se colore pas en entière lorsque que je passe la souris sur le lien. en plus lorsque que je passe hors du lien sur la case cela ne marche pas ?

html :
<table>		
 <tr> 
 <th>Document</th> <!--Type de document -->
</tr>
	<tr>
                   <td><a href="#">Nom1</a></td><tr> <!-- Ligne  -->
                <tr>
	 	
           									
  </table>


css :
table
{
border:3px grey groove;
border-collapse:collapse;
margin : 1px;
text-align: left;
}
tr
{
border:1px #808080 solid;
}
th
{
color : black;
font-weight:bold;
background-color: #C8FFFF ;
}
td a
{
color : #D2D2D2;
background-color: white ;
}
td a:hover
{
color : #808080;
background-color: #DCDCDC ;
text-decoration: underline;
}

3 réponses

julie-f Messages postés 63 Date d'inscription mardi 3 juillet 2012 Statut Membre Dernière intervention 31 août 2012 10
4 juil. 2012 à 12:29
Dans ton CSS tu a mis :
td a:hover
{
color : #808080;
background-color: #DCDCDC ;
text-decoration: underline;
}


Donc ton style ne s'affiche que lorsque tu passe sur le lien. Pour applique le changement de couleur sur la case il faudrait plutôt mettre un truc du style

td:hover {
background-color: #DCDCDC ;
}
td a:hover
{
color : #808080;
text-decoration: underline;
}


Ainsi :
Lorsque tu passe la souris sur la case du tableau, elle change de couleur
Lorsque tu passe la souris sur le lien, il change de couleur et est souligné.
2
marco8426 Messages postés 160 Date d'inscription mercredi 27 juin 2012 Statut Membre Dernière intervention 16 juin 2016 28
4 juil. 2012 à 11:33
Déjà tu as mal fermé les balises <tr></tr> au niveau de ton lien...

0
Merci je n'avais pas relu. Cependant cela ne résoud pas mon problème...
0
c'est bon j'ai trouvé une solution. A fermer
0
Pierrecastor Messages postés 41466 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 5 avril 2024 4 129
4 juil. 2012 à 12:19
Salut

Quel solution as-tu employé ? Ca peut servir à d'autre. :-)
0
j'ai séparé mes td et td hover td a hover et td a
0