Bonjour,

voici ma première demande d'aide sur ce forum. J'ai commencer la programmation il y a peu et j'espère pouvoir un jour en faire mon taff ! 

En attendant j'ai besoin de vos lumières !

Je souhaite faire en sorte que mon menu de navigation ( class="forme") change de couleur de texte lorsque les différents éléments sont survolés, qu'ils changent de taille et qu'ils aient une autre couleur une fois visité.

PROBLEME : La taille change mais la couleur reste identique...

Voici mon code HTML et CSS :

HTML:  

           <ul id=point>
                                                   
                   <li class="forme"> <a href="#ACCUEIL">ACCUEIL</a></li>
                   <li class="forme"> <a href="#Qui"> QUI SOMMES NOUS ?</a></li>
                   <li class="forme"> <a href="#PRESTATION">PRESTATION</a></li>
                   <li class="forme"> <a href="#CONTACT">CONTACT</a></li>
                   <li class="forme"> <a href="#Photo"> PHOTOS </a></li>
           </ul>

CSS :

                        #point
                        {
                            font-size: 1em;
                            display: flex;
                            justify-content: space-around;
                            list-style-type: none;
                            color: black;
                        }   

                        .forme:hover
                        {
                            color: white;
                            font-size: 50px;
                        }

                        .forme:visited
                        {
                            color: white ;
                        }

                    

Si quelqu'un a la solution, je lui en serait très reconnaissant !

signé : Un Breton dans l'lagen

-
Edité par Thrundil 14 octobre 2021 à 8:50:49

Bonsoir,

Tu ne cibles tout simplement pas le bon élément.

La pseudo-class :visited ne fonctionnera que sur une ancre.

Ici tu cibles l'item d'une liste, non une ancre.

D'accord, c'est vrai que c'est logique ...

Par contre, pourquoi mon hover fonctionne pour le font-size mais pas pour la couleur ?

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

---

Bonsoir, parce que pour l'élément <a> il existe une propriété color par défaut de l'user-agent, c'est à dire le navigateur.

Cette propriété s'applique en l'absence de style défini dans ta CSS.

Pour le voir utilise l'inspecteur des éléments (F12 sur la plupart des navigateurs)

-
Edité par AbcAbc6 13 octobre 2021 à 22:50:38

Thrundil a écrit:

D'accord, c'est vrai que c'est logique ...

Par contre, pourquoi mon hover fonctionne pour le font-size mais pas pour la couleur ?

Le font size est appliqué par on va dire heritage a l'enfant qui ici est un lien mais les liens eux ont une couleur par defaut donc pour modifier cette couleur tu dois appliquer le changement de couleur directement sur le lien.

Merci ABC pour le conseil et pour l'aide. Comme tu l'as demandé j'ai coloré les éléments nécessaire. 

zvheer, Merci également. J'ai fais les modifications ce qui a eu pour effets d'appliquer la couleur ainsi que les éléments underline.

Le seule problème restant est que la couleur blanche au survol ne s'applique pas. Une idée du soucis ?

<ul id=point>
                                                   
   <li> <a class="forme" href="#ACCUEIL">ACCUEIL</a></li>
   <li> <a class="forme"href="#Qui"> QUI SOMMES NOUS ?</a></li>
   <li> <a class="forme"href="#PRESTATION">PRESTATION</a></li>
   <li> <a class="forme" href="#CONTACT">CONTACT</a></li>
   <li> <a class="forme"href="#Photo"> PHOTOS </a></li>
</ul>

CSS :

#point
						{
							font-size: 1em;
							display: flex;
							justify-content: space-around;
							list-style-type: none;
							color: black;
						}	

						.forme
						{
							color: black;
							text-decoration: none;
						}

						.forme:hover
						{
							color: white;
							font-size: 40px;
							text-decoration: underline;
						}

						.forme:visited 
						{
							color: black ;
						}

-
Edité par Thrundil 14 octobre 2021 à 9:11:59

Pense à vider ton cache, le soucis viens surement de là, car ton code fonctionne : https://jsfiddle.net/6wegk9dq

Attention sur ta liste, les enfants direct ne peuvent être que des <li>, donc supprime ton <br> ligne 3. D'ailleurs, le <br> (break return) ne sert qu'à insérer un retour à la ligne au sein d'un paragraphe! Si tu souhaites créer un espace, utilises le CSS.

cntrl+ f5 ppur vider le cache

Bonjour,

l'ordre des sélecteurs pour les liens importe. Ici, tu places :visited après :hover donc c'est toujours :visited qu'on verra.

Le moyen mnémotechnique pour cet ordre : LoVe HAte -> :link :visited :hover (et :focus, n'oublie pas) :active.