Survol change hauteur d'une ligne/cellule (row/cell)

Bonjour à tous

Je souhaite qu'au survol de la souris sur une ligne (une cellule) d'un
tableau, la hauteur de celui-ci soit modifiée.

Pour l'instant, je n'y arrive qu'au survol du texte compris dans cette
cellule (grace au sélecteur :hover sur le lien en question qui augmente
la taille de police).

Pourriez-vous m'aider svp ?

Vous comprendrez immédiatement mon problème en faisant un saut sur
http://protiere.com (survolez les lignes colorées ; puis survolez chaque
prénom...)

Merci pour votre aide !
Cédric

Bonsoir,
Deux solutions s'offrent à toi, la première consiste à tout simplement attribuer un hover à un td comme ceci :

td:hover {
height: 50px
}

Ceci dit, il me semble que cette solution ne fonctionne pas sur tous les navigateurs, je te conseil donc de faire passer t'es liens en block comme ceci :

td a {
height: 40px;
display: block
}

td a:hover {
height: 50px
}

Voila, si tu as besoin d'avantage d'explication, n'hésites pas.


Bonne soirée

Pour vous faire gagner du temps, j'ai ça :


et je souhaite en passant sur la ligne contenant "Julie" obtenir ça :


Pour l'instant, ça ne fonctionne que lorsque je passe la souris sur le texte (et pas ailleurs dans la ligne)

Merci !

Wow, je suis impressionné par la rapidité et la qualité de la réponse.

Elle convient pratiquement, restent 2 points :
- lorsqu'on est tout en haut ou en bas d'une ligne, la hauteur est modifiée avant qu'on ne sorte de la ligne (ce n'est pas joli !)
- il me faudrait donner un nom à ce style parce que c'est appliqué à toutes les cellules (cf "made with nvu")... or je ne comprends pas ta solution et ne sais comment donner des noms aux styles td a

que se passe-t-il exactement : le lien est transformé en td ?
Voilà ma feuille de style :

body {font-family:Arial, Helvetica, sans-serif}
a {color:#FFF;font-size:9px;text-decoration:none;}
a.Style6 {font-size: 32pt;text-decoration:none;color:#000;}
a.Style6:hover {font-size: 40pt;}

td a {
height: 40px;
display: block
}

td a:hover {
height: 50px
}

J'ai aussi essayé

td a {
font-size: 32pt;
}

td a:hover {
font-size: 40pt;
}

mais ca ne marche pas mieux

merci pour tes éclaircissements
Cédric
Modifié par oanegaine (21 Jul 2005 - 17:15)