[Résolu]Changer l'apparence d'un lien au survol d'un span sans JS

Bonjour à tous,

je me retrouve face a un petit soucis. J'ai mon menu avec les différents éléments contenus dans des spans. Au survol des spans, je modifie la couleur de fond avec la propriété css :hover. Seulement je n'arrive pas à modifier la couleur du texte qui est en fait un lien.

Pour que ce soit plus clair, voici mon code

<span class='spanMenu' ><a href='index.php' class='menu' id='Menu_indexlien'>Accueil</a></span>

<span class='spanMenu' ><a href='news.php' class='menu' id='Menu_newslien'>Actus</a></span>]

Et mon CSS

.spanMenu{
padding-left:1.5em;
padding-right:1.5em;
display:table-cell;
height:5%;
vertical-align:middle;
text-align:center;
width:15em;
}

.spanMenu:hover{
background-color:#6d6a6a;
}

a.menu:hover{
color:#fff;
}

Avec ce code, il faut que je survole le lien pour que sa couleur change. Ce que j'aimerai faire c'est modifier au survol du span la couleur de fond et celle du lien. Et j'aimerai arriver à faire ca sans Javascript évidement.. Est-ce possible ?

Merci
Modifié par gussoner (27 Jul 2010 - 22:12)

Salut ,

j'ai pas essayé , mais j'aurai fais un truc du genre :

.spanMenu:hover a.menu{
color:#fff;
}

( pte pas besoin de preciser .menu enfaite mais bon )

Salut Mathieu,

et non ca ne fonctionne pas. Ca me change bien la couleur de la police et la couleur de fond de mon lien, mais pas la couleur de fond de mon span..

gussoner a écrit :
Au survol des spans, je modifie la couleur de fond avec la propriété css :hover. Seulement je n'arrive pas à modifier la couleur du texte qui est en fait un lien.

Quand j'ai lu ca j'avais compris que ca marché déjà quand tu survolé les spans et qu'il y avais seulement le lien qui ne changé pas xD


.. c'est bizarre que ca marche pas .. ta bien mis les 2 ?

.spanMenu{ 
padding-left:1.5em; 
padding-right:1.5em; 
display:table-cell; 
height:5%; 
vertical-align:middle; 
text-align:center; 
width:15em; 
} 

/* ta bien mis les 2 ?  */
/* ca pour changé la couleur du lien quand tu survole le span */
.spanMenu:hover a.menu{ 
color:#fff; 
}

/* et ca pour changé la couleur de fond du span quand tu le survole */
.spanMenu:hover{ 
background-color:#6d6a6a; 
} 

Yes nickel

En fait j'avais pas mis les deux effectivement

Et donc pour bien comprendre la synthaxe

.spanMenu:hover a.menu

c'est "instruction espace objet à modifier"