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 :

Apparition d'un bloc au survol d'un lien


Sujet :

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

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    101
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juin 2007
    Messages : 101
    Points : 59
    Points
    59
    Par défaut Apparition d'un bloc au survol d'un lien
    Bonjour,
    la question a du être posée à plusieurs reprises mais je cherche une solution simple pour faire apparaitre un bloc au passage de la souris sur un lien... Je cherche depuis ce matin, sans succès.Ça ne doit pas être bien sorcier pourtant.
    Voici mon code, qui ne fonctionne pas...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    <html>
    <head>
    <title>Test apparition DIV</title>
     <style type="text/css">
     
     .madiv{
     width:50px;
     height:50px;
     border:solid 1px red;
     visibility:hidden;
     }
     </style>
     
    </head>
    <body>
    <a href="#" onmouseover="madiv.visibility='visible';" onmouseout="madiv.visibility='hidden';">Survolez pour voir la DIV</a>
    <div class="madiv"></div>
    </body>
    </html>
    Merci à ceux qui le pourront de m'éclairer

    A+
    Philippe

  2. #2
    Inactif  

    Homme Profil pro
    développeur Vala
    Inscrit en
    Février 2011
    Messages
    478
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : développeur Vala
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2011
    Messages : 478
    Points : 3 700
    Points
    3 700
    Par défaut
    ton code pose plusieurs problèmes :
    l'édition du style en javascript ne peut se faire normalement avec les classes.
    Comme tu n'as qu'une div, utilise plutot un identifiant en css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #madiv{
     width:50px;
     height:50px;
     border:solid 1px red;
     visibility:hidden;
     }
    de plus, pour éditer un style en javascript, il faut utiliser la syntaxe suivante :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    id.style.width //exemple pour éditer la largeur
    //ou mieux encore
    document.getElementById('id').style.width
    voilà !
    (marquer un post résolu si vous êtes satisfait de la réponse )
    ma page launchpad https://launchpad.net/~inizan-yannick
    ma page github : https://github.com/inizan-yannick

  3. #3
    Inactif  

    Homme Profil pro
    développeur Vala
    Inscrit en
    Février 2011
    Messages
    478
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : développeur Vala
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2011
    Messages : 478
    Points : 3 700
    Points
    3 700
    Par défaut
    c'est mon jour de bonté : voici le code corrigé
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <html>
    <head>
    <title>Test apparition DIV</title>
     <style type="text/css">
     
     #madiv{
     width:50px;
     height:50px;
     border:solid 1px red;
     visibility:hidden;
     }
     </style>
     
    </head>
    <body>
    <a href="#" onmouseover="document.getElementById('madiv').style.visibility='visible';" onmouseout="document.getElementById('madiv').style.visibility='hidden';">Survolez pour voir la DIV</a>
    <div id="madiv">dgsd</div>
    </body>
    </html>
    certains apprécieraient que tu place le style dans un fichier css séparé, mais ici ce n'est pas trop grave, tu n'as pas grand chose
    (marquer un post résolu si vous êtes satisfait de la réponse )
    ma page launchpad https://launchpad.net/~inizan-yannick
    ma page github : https://github.com/inizan-yannick

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    101
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juin 2007
    Messages : 101
    Points : 59
    Points
    59
    Par défaut
    Merci beaucoup,
    ça me parait tout bête maintenant que je vois ta correction, mais j'y étais depuis ce midi...
    Je vais tenir compte de tes remarques de présentation dans mes prochains posts...

    A+
    Philippe

  5. #5
    Inactif  

    Homme Profil pro
    développeur Vala
    Inscrit en
    Février 2011
    Messages
    478
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : développeur Vala
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2011
    Messages : 478
    Points : 3 700
    Points
    3 700
    Par défaut
    de rien .
    marque donc ce post comme résolu et donne moi des points !
    (marquer un post résolu si vous êtes satisfait de la réponse )
    ma page launchpad https://launchpad.net/~inizan-yannick
    ma page github : https://github.com/inizan-yannick

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

Discussions similaires

  1. Modifier la couleur d'un bloc au survol d'un lien
    Par filtep dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 05/06/2012, 12h57
  2. Problème de decalage à l'apparition d'un bloc display:none
    Par programmeur400 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 17/11/2011, 16h37
  3. Apparition d'un bloc via bouton
    Par Bhinouze dans le forum jQuery
    Réponses: 2
    Dernier message: 24/07/2011, 01h04
  4. Apparition d'un bloc de texte en fonction d'un survol de liens
    Par black is beautiful dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 01/04/2007, 19h38
  5. [CSS] Effet au survol d'un lien
    Par Death83 dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 11/02/2006, 02h21

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