Effet de roll over sur un tableau

Par cleo57, il y a 12 ans

Les bases HTML/CSS

Bonjour,
J'ai un petit souci sur un effet de roll over sur les cellules d'un menu horizontal que j'ai créé sous forme de tableau.
Je souhaiterais que le texte à l'intérieur des cellules et le fond changent de couleur au survol de la souris. Ainsi, à l'état normal j'ai une cellule de fond noir avec un texte blanc et au survol un texte noir sur fond blanc.
Le problème est que je n'arrive pas à obtenir cet effet de manière uniforme: au survol la cellule est toute blanche si ma souris se trouve près des bords de la cellule. 



<table width="1010px" border="0" cellspacing="0" cellpadding="0"bgcolor="2f2828">
        <tr>
        <td width="115px" align="center" cellspacing="0" cellpadding="0"><a href="#">PRINCIPE</a></td>
        <td width="115px" align="center" cellspacing="0" cellpadding="0"><a href="#">FAITES LE VOUS MÊME...!</a></td>
        <td width="115px" align="center" cellspacing="0" cellpadding="0"><a href="#">GALERIE</a></td>
        <td width="115px" align="center" cellspacing="0" cellpadding="0"><a href="#">LIVRE D'OR</a></td>
        </tr>
        </table>

td
{
    height: 30px;
}
td:hover
{
    background-color: #ada9a9;
}
a
{
    display: block;
    text-decoration: none;
    color: #ada9a9;
    font-family: Libre Baskerville;
    font-size: 16px;
}
a:hover
{
    border: 1px solid white;
    color: #2f2828;
}

Merci d'avance pour vos réponses

4 réponses

coloo, il y a 12 ans

Bonjour,

Comme tu l'as écris, ton lien changera de couleur que si le a est survolé

td:hover > a {
  border: 1px solid white;
    color: #2f2828;

}

En écrivant ce code ton "a" changera quand l'utilisateur survolera le "td". Il y aurais eu un autre moyen, en augmentant le padding de ton a mais il n'yaurait plus la bordure.

My Codepen

NB : La balise table est faite pour créer des tableaux et non des menus. ul>li est préférable pour faire cela. En voyant ton travail, je suis revenu 10ans en arrière (quand les float et les positions n'existaient pas).

Bonne continuation.

cleo57, il y a 12 ans

Merci beaucoup pour ta réponse.
Il m'a semblé plus simple et rapide de faire une table pour un menu horizontal: En quoi ul>li est-il préférable ?

coloo, il y a 12 ans

Tout simplement car la balise table est créé pour renfermé des données tabulaire/stat. C'est comme si je m'amuser a transformer une balise p en div. Au premier abord la balise table peut etre facile à comprendre mais la mise à jour de ton site sera d'autant plus compliqué que tu auras utiliser des tables. Il y a des propriété comme table-cell qui te permet d'allier la balise ul avec un rendu table :p.

Au début on comprend pas pourquoi des personnes comme moi font chié les nouveaux alors que table c'est tellement simple. Si tu fais une maintenance de oscommerce tu comprendras ce que je dis :p.

On utilise pas table pour le positionnement comme on utilise plus les frame pour chaque partie de son site :p. C'est une évolotion, une facilité d'entretien et un seo optimisé.

Marques résolu sur le post où tu as trouvé ta solution.

Bonne continuation.

cleo57, il y a 12 ans

Ok, je comprends cela.
Merci à toi ;)