IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

afficher une div au survol d'une autre div


Sujet :

Survol d'un élément en CSS (:hover)

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 18
    Points : 9
    Points
    9
    Par défaut afficher une div au survol d'une autre div
    Bonjour tout le monde

    Comme le titre de se sujet l'indique je souhaiterai qu'au survol de ma souris sur une div, une autre div, jusque la caché, apparaisse.

    Ce serai une sorte de menu, la 1ere div correspond au titre des catégorie et la 2eme div, à tout son contenu.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="niveau1">
                        <div class="DLFirstLevels"><a href="#" class="niveau1_titre">XXXXXX</a></div>
                        <div class="niveau2">
                            <dl>
                                <dt class="niveau2_titre"><a href="sous_menu1.1" class="sous_menu_titre">XXXXXX</a></dt>
                                <dd><a href="sous_menu1.2">XXX</a></dd>
                                <dd><a href="sous_menu1.3">XXX</a></dd>
                                <dd><a href="sous_menu1.4">XXX</a></dd>
                            </dl>
                        </div>
               </div>
    Ici, au passage de la souris sur div class="DLFirstLevels", la <div class="niveau2"> apparait.

    merci

  2. #2
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    Mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2009
    Messages : 634
    Points : 3 511
    Points
    3 511
    Par défaut
    Salut,

    en CSS, il y a la pseudo-class "hover" qui te permet de la faire.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    .niveau2{
    	display:none;
    }
    .niveau1:hover .niveau2{
    	display:block;
    }
    sur le hover de ton div class="niveau1", la div class="niveau2" apparaitra et inversement sur un rollout.

    ++

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 18
    Points : 9
    Points
    9
    Par défaut
    Merci

    Je connaissais hover, mais j'avais mal imbriquer mes div. Comme tu me la montré était la bonne façon de faire.

    Maintenant ca marche nickel

    Et désolé pour la longue réponse, mais j'avais laisser de coté, je viens de reprendre ce menu

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 23/05/2014, 11h16
  2. Réponses: 10
    Dernier message: 13/02/2014, 16h54
  3. Changer background DIV au survol d'un autre DIV
    Par reedbedroom dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 31/12/2013, 05h47
  4. Ajouter une div au survol d'un autre div (suite)
    Par LadyArwen dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 14/03/2013, 09h16
  5. Modifier les propriétés d'une div au survol d'une autre
    Par umeboshi dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/09/2008, 18h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo