Substitution de texte en survol

flippy

Membre expert
20 Août 2009
1 399
63
Bonjour. Je recherche un code qui puisse en survol de la souris faire apparaître en dessous un autre texte que celui de départ (txt en html bien sûr). Je le faisais toujours en classique avec des img, mais là je sèche lamentablement (pourtant c'est plutôt élémentaire) :shy::meh::confused:. Quelqu'un a-t-il ça dans son gourbit ? D'avance merci...
 
Merci pour tes pistes. C'est bien ce que je redoutais, pas si simple que ça en syntaxe basique. Je vais voir du côté des css et autres js.
 
On peut en savoir un peu plus sur le contexte et sur ce à quoi ça doit ressembler ?
Je pense qu'il y a pas mal de plugins jquery type tooltip qui doivent pouvoir correspondre et s'adapter facilement mais il faut que la structure sémantique soit correcte (ça peut utiliser l'attribut title sur un span, par exemple)

D'ailleurs pour commencer, le fait de simplement utiliser l'attribut title sur un span (du pur HTML, donc) pourrait être un bon début.

Après, selon le contexte, il il a des balises HTML spécifiques qui pourrait peut-être servir… (comme <abbr>…).
 
Dernière édition:
En fait je voulais simplement (mais c'est toujours un peu plus compliqué dans la pratique ;)) substituer une phrase de moins de dix mots par un rollover faisant apparaitre une seconde phrase en remplacement temporaire de la première (un chouia plus courte ou plus longue) sans passer par une img, la phrase d'origine réapparaissant en sortie du up. Autrement je code toujours en xhml (même s'il n'est pas toujours très stricte...). Je continue sur la piste des jquery (je n'y avais pas pensé bien que j'en utilise déjà pour mes pages contact ou mes scrolls personnalisés). Merci pour tes précisions.
 
Bonjour. Je recherche un code qui puisse en survol de la souris faire apparaître en dessous un autre texte que celui de départ (txt en html bien sûr). Je le faisais toujours en classique avec des img, mais là je sèche lamentablement (pourtant c'est plutôt élémentaire) :shy::meh::confused:. Quelqu'un a-t-il ça dans son gourbit ? D'avance merci...

Quelque chose comme ça (très très brut de décoffrage, en donnant la classe .dessous au paragraphe que tu veux voir apparaître):
Bloc de code:
p .dessous {
display:none;
}

p .dessous:hover {
display:block
}

Après faut voir le contexte, ce que tu as déjà sous ton texte de départ, si c'est dans un menu, etc…
 
Ça serait pour un texte sur une ligne, complètement isolé, donc pas dans le cadre d'un menu ou autre... Je suis en train de tester via les css...
 
En fait pas si simple uniquement via css; j'ai fait ça dans un menu il y a longtemps, et c'était tout une histoire; js est mieux fait pour ça…
 
Bon finalement si, j'ai trouvé une solution assez simple en CSS en utilisant overflow et opacity.
Bon, en revanche, le second paragraphe (dessous) prendra de la place dans ton design, il faut compter avec.

HTML:
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <style>
        .dessous {
              overflow:hidden;
            opacity:0;
        }
        .dessous:hover, .dessous:focus, .dessous:active /* si besoin pour du tactile */ {
            overflow:auto;
            opacity: 1;
        }
    </style>
  </head>
  <body>
    <p class="dessus">ton texte
   <p class="dessous">le texte à faire apparaître</p></p>
  </body>
  </html>
 
Je n'y avais pas pensé mais effectivement en jouant sur opacity (une autre façon de faire un hidden)... Merci pour la piste...