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 :

hover sur un div possible ?


Sujet :

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

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    256
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 256
    Par défaut hover sur un div possible ?
    bonjour,

    je souhaire reproduire à peu près la même bare de menu que celle là (voir le lien):
    http://www.microsoft.com/france/wind...a/default.aspx

    j'ai monter la barre de menu (div D) avec un arriere plan A. Et je voudrais qu'au passage de la souris sur une partie (div D_i) de D la couleur de l'arrière plan change.

    J'ai regarder dans la doc css j'ai pas trouvé grand chose.


    merci de me donner un coup de main !

  2. #2
    Membre émérite
    Avatar de viviboss
    Profil pro
    Inscrit en
    Août 2006
    Messages
    943
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Août 2006
    Messages : 943
    Par défaut
    Ta barre de menu, par définition, doit avoir des liens (a href="....."). Il faut que dans tes styles tu définisses ce genre de chose, l'élément clé est le "display:block" :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    a {
    background : #000000;
    display:block
    }
     
    a:hover {
    background : #111111;
    }
    Bonne chance !!!
    Veni Vidi Vici
    -------------------------
    Mes articles : developpez.com ou bien vbview.net
    -------------------------
    Et SURTOUT ne pas oublier la bible PHP : --> php_manual_fr.chm!!!
    Et aussi : --> pear_manual_fr.chm!!!

    Ou encore : --> Les tutoriaux & cours PHP de Développez.com
    -------------------------

  3. #3
    Membre émérite
    Avatar de viviboss
    Profil pro
    Inscrit en
    Août 2006
    Messages
    943
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Août 2006
    Messages : 943
    Par défaut
    ..... Ou t'as qu'à faire comme sur le site que tu donne en exemple : tu met une image en arrière plan dans l'attribut de "a", et dans "a:hover" tu change l'image d'arrière plan....
    Veni Vidi Vici
    -------------------------
    Mes articles : developpez.com ou bien vbview.net
    -------------------------
    Et SURTOUT ne pas oublier la bible PHP : --> php_manual_fr.chm!!!
    Et aussi : --> pear_manual_fr.chm!!!

    Ou encore : --> Les tutoriaux & cours PHP de Développez.com
    -------------------------

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    256
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 256
    Par défaut
    ok !!!! merci !!!



    pourquoi display:block est obligatoire ? n'est ce pas la valeur par défaut du div ?

  5. #5
    Membre émérite
    Avatar de viviboss
    Profil pro
    Inscrit en
    Août 2006
    Messages
    943
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Août 2006
    Messages : 943
    Par défaut
    display : block te permet de mettre l'intégralité du div en survolé, sans cette instruction, seul tes "liens" pourraient être survolés (c'est à dire ton mot ou ta phrase en lien, mais pas l'arrière plan....)
    Veni Vidi Vici
    -------------------------
    Mes articles : developpez.com ou bien vbview.net
    -------------------------
    Et SURTOUT ne pas oublier la bible PHP : --> php_manual_fr.chm!!!
    Et aussi : --> pear_manual_fr.chm!!!

    Ou encore : --> Les tutoriaux & cours PHP de Développez.com
    -------------------------

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    256
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 256
    Par défaut
    ça marche, merci pour votre aide !!


    sincèrement

  7. #7
    Membre émérite
    Avatar de viviboss
    Profil pro
    Inscrit en
    Août 2006
    Messages
    943
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Août 2006
    Messages : 943
    Par défaut
    De rien, bonne chance
    Veni Vidi Vici
    -------------------------
    Mes articles : developpez.com ou bien vbview.net
    -------------------------
    Et SURTOUT ne pas oublier la bible PHP : --> php_manual_fr.chm!!!
    Et aussi : --> pear_manual_fr.chm!!!

    Ou encore : --> Les tutoriaux & cours PHP de Développez.com
    -------------------------

Discussions similaires

  1. Hover sur une div
    Par stevench dans le forum jQuery
    Réponses: 9
    Dernier message: 28/11/2013, 09h48
  2. Hover sur une div change son h2
    Par PtitGénie dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 27/10/2011, 16h41
  3. évènement hover sur un div
    Par sebac dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 16/03/2010, 10h58
  4. changer l'image d'un div lorsque hover sur un autre ?
    Par pcouas dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/02/2008, 10h25
  5. Est-ce possible : hover sur table.
    Par Sergejack dans le forum Balisage (X)HTML et validation W3C
    Réponses: 14
    Dernier message: 15/10/2007, 11h55

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