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

HTML Discussion :

Changer du texte au passage de la souris


Sujet :

HTML

  1. #1
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Par défaut Changer du texte au passage de la souris
    Bonjour

    Je recherche pour changer de texte au passage de la souris.
    C'est à dire j'ai une texte ex: Bonjour j'aimerai que lorsque je passe ma souris dessus le texte Bonjour change et devient Au revoir

    Je vous remercie

    Max

  2. #2
    Membre Expert
    Avatar de Hephaistos007
    Profil pro
    Enseignant Chercheur
    Inscrit en
    Décembre 2004
    Messages
    2 493
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Enseignement

    Informations forums :
    Inscription : Décembre 2004
    Messages : 2 493
    Par défaut
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <p>
    <span onmouseover="this.innerText='Aurevoir'">
    Bonjour
    </span>
     à tous
    </p>
    Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes --- devise SHADOKS

    Kit de survie Android : mon guide pour apprendre à programmer sur Android, mon tutoriel sur les web services et enfin l'outil en ligne pour vous faire gagner du temps - N'oubliez pas de consulter la FAQ Android

  3. #3
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 130
    Par défaut
    Salut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <span onmouseenter="this.innerText='au revoir'" onmouseout="this.innerText='bonjour'">
    pour que la phrase revienne comme elle était avant le passage de la souris.
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  4. #4
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    Et pour mémoire, le principe existe sans JS:

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .t:after{content: "Bonjour"}
    .t:hover:after{content:"Au revoir"}
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="t"></div>

  5. #5
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 494
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 494
    Par défaut
    et pour dynamiser le tout (toujours sans JS) (je pense qu'il voudra faire autre chose que bonjour/au revoir)
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="test" data-nohover="Bonjour" data-hover="Au revoir"></div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .test:after{ content: attr(data-nohover); }
    .test:hover:after{ content: attr(data-hover); }
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    il est surprenant que vous utilisiez le pseudo-élément :after pour insérer quelque chose avant

  7. #7
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    "avant"? Avant quoi? C'est un exemple avec un contenant vide...

Discussions similaires

  1. Réponses: 3
    Dernier message: 04/01/2013, 20h30
  2. Affichage d'un texte sur passage de la souris
    Par etorria dans le forum VBA PowerPoint
    Réponses: 6
    Dernier message: 11/04/2008, 09h47
  3. afficher une info sur du texte au passage de la souris
    Par incao dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 07/06/2006, 09h21
  4. Faire défiler un texte au passage de la souris
    Par krolineeee dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 03/06/2006, 12h00

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