Partage
  • Partager sur Facebook
  • Partager sur Twitter

Hover visited ne fonctionne pas

    13 octobre 2021 à 21:31:16

    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

    • Partager sur Facebook
    • Partager sur Twitter
      13 octobre 2021 à 21:39:01

      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.

      • Partager sur Facebook
      • Partager sur Twitter

      Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

        13 octobre 2021 à 22:06:50

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

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

        • Partager sur Facebook
        • Partager sur Twitter
          13 octobre 2021 à 22:49:51

          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 Code 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


          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

          • Partager sur Facebook
          • Partager sur Twitter
            13 octobre 2021 à 23:31:31

            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.
            • Partager sur Facebook
            • Partager sur Twitter
              14 octobre 2021 à 9:01:22

              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

              • Partager sur Facebook
              • Partager sur Twitter
                14 octobre 2021 à 10:37:14

                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.

                • Partager sur Facebook
                • Partager sur Twitter

                Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

                  14 octobre 2021 à 13:04:32

                  cntrl+ f5 ppur vider le cache
                  • Partager sur Facebook
                  • Partager sur Twitter
                    14 octobre 2021 à 18:52:30

                    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.

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

                    Hover visited ne fonctionne pas

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    • Editeur
                    • Markdown