Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probleme hover css

Sujet résolu
    1 février 2020 à 18:33:48

    Bonjour, j'ai plusieurs div portant la classe : .menu-box-item avec des span qui doivent s'afficher qu'au survole. Niveau css j'utilise cette commande .menu-box-item:hover span . Le problème c'est que toutes les span s'affiche pas uniquement celle survolée, help me plz

    • Partager sur Facebook
    • Partager sur Twitter

    Codeur et étudiant passionné. Ou l'inverse.

      1 février 2020 à 18:50:49

      Bonjour,

      Je n'ai pas très bien compris, mais il nous faudrait ton code pour mieux te guider

      Sinon regarde du coté des sélecteurs css (plus précisément > /ou/ ~ /ou/ +

      Si tes span sont directement après tes div alors tu devras faire : .menu-box-item:hover + span

      Voir : https://www.w3schools.com/cssref/css_selectors.asp

      Mais le mieux serait de nous fournir ton code !

      -
      Edité par Mehddii 1 février 2020 à 18:51:10

      • Partager sur Facebook
      • Partager sur Twitter

      Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

        Staff 1 février 2020 à 18:53:16

        Bonjour,

        Mauvais titre

        Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

        Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

        De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

        Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

        Pour modifier votre titre, éditez le premier message de votre sujet.

        (titre originel : Probleme hover css)

        Liens conseillés


        Bonsoir, le sélecteur .menu-box-item:hover span veux dire tous les balises <span> enfant de la class .menu-box-item et au passage de la souris sur cette class.

        Ce n'est pas ce que vous souhaitez?

        • Partager sur Facebook
        • Partager sur Twitter
          1 février 2020 à 19:26:31

          Bonsoir,

          Si j'ai bien compris ta demande tu peut utiliser :

           .menu-box-item:nth-child(1):hover span


          Dans ce cas (si je m'en souvient bien) Ton premier parent menu box item au survol affichera le contenu située dans la balise span de se parent uniquement

          • Partager sur Facebook
          • Partager sur Twitter
            2 février 2020 à 7:25:50

            Bonjour, merci de vos réponses. Je m'excuse si je me suis mal exprimé. Ce que je voudrai, c'est lors du survolé de position 1 (par exemple) il y ai que les span position 1 qui s'affichent. Une autre solution sera de faire une classe pour chaque div mais je voulais savoir si je pouvais le faire comme ça car ça prendre très peu de ligne Voici le code html :

                            <div>
                                <span></span><span></span>
                                User Name
                            </div>
                            <div>
                                <span></span><span></span>
                                <a>Position 1</a>
                            </div>
                            <div>
                                <span></span><span></span>
                                <a>Position 2</a>
                            </div>
                            <div>
                                <span></span><span></span>
                                <a>Position 3</a>
                            </div>
                        </div>
            

            Et le css : .menu-box-item:hover span{

            visibility: visible;
            

            }

            -
            Edité par Arthur_crbr123 2 février 2020 à 7:33:45

            • Partager sur Facebook
            • Partager sur Twitter

            Codeur et étudiant passionné. Ou l'inverse.

              2 février 2020 à 9:12:47

              Bonjour,

              Ton code css est correct, ta solution est celle qui me vient à l'esprit, je ne pense pas qu'il y'ai un moyen plus rapide de le faire

              https://codepen.io/MehdiX/pen/wvBVzyV?editors=1100

              Il y'a pas bcp de lignes donc oui

              -
              Edité par Mehddii 2 février 2020 à 9:42:26

              • Partager sur Facebook
              • Partager sur Twitter

              Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

                Staff 2 février 2020 à 10:53:05

                Bonjour, merci de modifier le titre de votre sujet comme demandé, "problème" n'a rien à y faire, si vous poster on se doute que vous avez un problème.

                Pour le coup je ne suis pas tout à fait d'accord avec Mehddii, dans son exemple le premier div est impacter alors qu'il ne contient pas d'élément <a> position.

                1) si tu veux qu'un style s'applique au passage de la souris sur les liens, le :hover dois s'y appliquer et non sur le parent.

                2) Il n'est pas possible en CSS de cibler l'élément frère qui précède mais il est tout à fait possible de cibler l'élément frère qui suit grâce au sélecteur d'adjacence indirect ~ . Je te propose donc de modifier légèrement ton HTML et un coup de flexbox pour afficher le tout correctement. 

                Ce qui  donne en CSS

                            .menu-box-item {
                                display: flex;
                                flex-direction: row-reverse;
                                justify-content: flex-end;
                            }
                            .menu-box-item a  ~ span {
                                visibility: hidden;         
                            }
                            .menu-box-item a:hover ~ span {
                                visibility: visible
                            }

                avec le HTML suivant

                <div class="menu-box-item">
                            User Name 
                            <span></span><span></span>
                
                        </div>
                        <div class="menu-box-item">
                
                            <a>Position 1</a>
                            <span></span><span></span>
                        </div>
                        <div class="menu-box-item">
                            <a>Position 2</a>
                            <span></span><span></span>
                        </div>
                        <div class="menu-box-item">
                
                            <a>Position 3</a>
                            <span></span><span></span>
                        </div>

                Explication https://www.alsacreations.com/article/lire/1312-selectionner-les-freres-d-un-element-en-css-nth-child.html

                Et un lien à garder sous le coude :

                https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048



                -
                Edité par AbcAbc6 2 février 2020 à 10:54:45

                • Partager sur Facebook
                • Partager sur Twitter
                  2 février 2020 à 11:21:49

                  Autant pour moi, je pensais qu'il souhaitait survoler les div élément afin d'afficher les span

                  Mais comme dit dans mon précédent message, les sélecteurs css feront l'affaire

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

                  Probleme hover css

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