28216 sujets

CSS et mise en forme, CSS3

Changer la couleur d'une cellule lorsque la souris passe dessus

Pages :
Bonjour,

Je voudrais stocker le menu de mon site dans un tableau qui lui même est stocké dans un div.
Je fais cela pour changer la couleur de la cellule lorsque la souris passe sur le lien. Je voudrais savoir si je suis obligé de passer par le javascript pour réaliser cela ?

Merci.
Modifié par pekka (21 Nov 2005 - 00:32)
Plop,

Effectivement il faudra du javascript si tu veux que IE comprenne la chose. Ce dernier ne comprend pas la pseudo classe hover sur autre chose qu'un élément <a>.
Non le javascript n'est pas nécessaire.
Si tu tiens à utiliser un tableau (ce qui n'est pas, en général, le meilleur moyen pour un menu), tu peux utiliser quelquechose de ce type:
<html>
<head>
<title>test</title>
<style>
td{
width:400px;
}
#tdone a{
width:100%;
}
#tdone a:hover{
background-color:#999999;
}
</style>
</head>
<body>
<table>
<tr>
<td id="tdone"><a href="#">menu 1</a></td>
<td>hop</td>
</tr>
</table>
</body>
</html>

(le lien occupe tout le <td> grace au width:100%)
Merci pour vos posts.
Je pense que je vais passer par le javascript parce que :
- sous firefox ça ne marche pas
- la cellule ne change pas complètement de couleur
oui pardon, il fallait bien sur mettre le hover pour le td également, pour un fonctionnement normal avec FF et les navigateurs standards
<html>
<head>
<title>test</title>
<style>
td{
width:400px;
}
#tdone a{
width:100%;
}
#tdone a:hover{
background-color:#999999;
}
#tdone:hover{
background-color:#999999;
}
</style>
</head>
<body>
<table>
<tr>
<td id="tdone"><a href="#">menu 1</a></td>
<td>hop</td>
</tr>
</table>
</body>
</html>


Par contre, je ne vois pas ce que tu entends par "la cellule ne change pas complètement de couleur"
Je voulais dire que le fond de la cellule change de couleur sur toute sa longueur mais sur toute sa hauteur.
Il suffit de donner une hauteur de 100% au lien pour qu'il occupe tout la cellule
<html>
<head>
<title>test</title>
<style>
td{
width:400px;
height:50px;
}
#tdone a{
width:100%;
height:100%;
}
#tdone a:hover{
background-color:#999999;
}
#tdone:hover{
background-color:#999999;
}
</style>
</head>
<body>
<table>
<tr>
<td id="tdone"><a href="#">menu 1</a></td>
<td>hop</td>
</tr>
</table>
</body>
</html>
Salut,
Je me permet de rebondir là dessus car je tente de faire exactement la même chose.
Ton code fonctionne très bien sous ff et Opéra, mais apparement il ne fonctionne pas pour Ie, ou alors j'ai raté une étape? Smiley rolleyes
Ah,
Est ce que j'ai pu désactiver un truc qui fasse que cela ne fonctionne pas?

Sinon, pour info j'ai fait une autre méthode, assez proche de la méthode des image map, voici mon code, ça fonctionne à peu près bien. Apparement.

#image1 {
font-size:10px;
height:145px;
width:174px;
background-color:#FFCC99;
background-image: url(zone1.jpg);
}
-->

#image1 a{
 display:block;
 padding-bottom:65px;
 padding-left:55px;
 padding-right:33px;
_height:1%;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif
}

#image1 a:hover{
  text-decoration:underline;
  color:#CC0000 ;
}


En fait, pour faire croire que toute ma cellule réagis j'ai mis des paddings quoi...
ça doit pas être super élégant Smiley sweatdrop
Smiley sweatdrop Smiley eek Smiley confus
j'ai refait le test 5 fois, et ça marche...
mais tu dis ça ne fonctionne pas : qu'est ce qui ne fonctionne pas en fait...
(que je m'assure d'avoir compris la question...)
La cellule n'est pas active, elle ne réagis pas au :hover et ne change pas non plus de couleur. Seul le lien prend la couleur de fond.
Concernant le code de yyoupla (j'ai pas encore testé celui de Thinkedou) :

Chez moi ça marche parfaitement bien sous FF.
Presque identique sous IE (6 et 5.5 sp2) sous XP : il reste juste un petit border de la couleur du background-color si on en précise une pour la TD. Et on pourrait supprimer la transformation du pointeur de la souris en main pour être identique à ce qu'on a sous FF.

Bravo et merci. Je marque-page Smiley murf
Modifié par globy (23 Nov 2005 - 16:58)
donc ça marche (ca me rassure un peu Smiley langue )
oui je n'ai pas poussé la présentation jusqu'à la définition des bordures, mais c'est faisable.

Config testée:
IE6.0 et MozFF1.5 sous Win2000
Je suis désolé yyoupla ça marche maintenant.
J'avais copié ça dans un éditeur, peut être qu'une balise trainais quelque part. En copiant strictement ton code sans rien d'autre, ça fonctionne très bien.

je suis désolé de t'avoir fait si peur...


Edit :
Par contre, quand je rajoute ça : 

#tdone a:hover{
background-color:#999999;
color:#FFF;
}
#tdone:hover{
background-color:#999999;
color:#FFF;
}


Et bien le lien ne change pas sous ff et opéra, le changement s'effectue seulement si on est sur le lien.
Modifié par Thinkedou (23 Nov 2005 - 18:55)
décidemment, j'ai pas réussi à mettre un code complet fonctionnel depuis le début de ce topic... Smiley sweatdrop
voilà voilà
<html>
<head>
<title>test</title>
<style>
td{
width:400px;
height:50px;
}
#tdone a{
display: block;
width:100%;
height:100%;
color:#006600;
}
#tdone a:hover{
background-color:#999999;
color:#ffffff;
}
#tdone:hover{
background-color:#999999;
color:#ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td id="tdone"><a href="ser">menu 1</a></td>
<td>hop</td>
</tr>
</table>
</body>
</html>

Explication : le display:block sur les <a> pour pouvoir lui donner une largeur.
Merci beaucoup yyoupla, décidemment, quelle ténacité !

Cependant (et là tu vas me haïr), cette solution ne semble pas très bien prendre en compte un padding-left sous ff.
En effet, si je met un padding-left et que j'arrive par la gauche dans le bloc, le texte ne réagis pas...



mais à la base ce n'était pas ma question, et ta réponse conviendra peut être à la personne qui l'a posée !
Pages :
Sujet clos
Aller à