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

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

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

• Règles générales du forum

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?

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

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>

visibility: visible;

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

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

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

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