5547 sujets

Sémantique web et HTML

[Résolu] Modifier le contenu du texte au survol de la souris

Bonjour à tous,

Question un peu naïve mais après d’infructueuses recherches je me demande toujours si il est possible de modifier le contenu d'un texte lors de son survol par la souris sans utiliser javascript.

Je connais plusieurs méthodes pour changer une image lors d'un rollOver, en css (a:hover), et directement dans le code html (onmouseover="image1.src='xxx'" onmouseout="image1.src='xxx'" onmousedown="image1.src='xxx'").

Peut-être le display:none pourrait être salvateur ?

Existe-t-il une technique aussi simple, légère ... pour changer le contenu du texte, je suis sûr que oui.

Je travaille sur un site en html-css et j'essaie de limiter au maximum l'utilisation de javascript.

Merci d'avance.

Gaelp
Bonjour,

tu dois pouvoir gérer ça en css avec display:none effectivement. Le contenu ne changera pas vraiment, mais mettons que tu aies deux paragraphes l'un sur l'autre : le premier est masqué et le second affiché, et au survol de leur conteneur le second disparait et le premier apparait.

C'est plus un subterfuge qu'une modification du contenu, mais visuellement le résultat est le même. Est-ce une solution raisonnable dans ton cas ?
Bonjour,
C'est possible...
Voici deux façons différentes de faire, mais la seconde n'est pas accessible du tout (donc à ne surtout pas utiliser) mais c'est pour montrer qu'elle existe et qu'elle pourrait être utilisée d'une autre manière...

Plus ou moins accessible (je pense ?)
<div class="change">
    <span class="avant">Avant</span>
    <span class="apres">Après</span>
</div>
.change .apres, .change:hover .avant {
    display : none;
}

.change:hover .apres {
    display : block;
}
Pas accessible du tout (enfin, tout dépend l'utilisation que tu en fait, si c'est pour autre chose que du contenu, ça pourrait éventuellement être utilisé...) :
<div id="test"></div>
#test:before {
    content:"Coucou les gens !";
}

#test:hover:before {
    content:"En fait, non... pas coucou...";
}

Modifié par Gothor (07 Jun 2012 - 18:22)
Gothor a écrit :
Bonjour,
C'est possible...
Voici deux façons différentes de faire, mais la seconde n'est pas accessible du tout (donc à ne surtout pas utiliser) mais c'est pour montrer qu'elle existe et qu'elle pourrait être utilisée d'une autre manière...

Plus ou moins accessible (je pense ?)
&lt;div class=&quot;change&quot;&gt;
    &lt;span class=&quot;avant&quot;&gt;Avant&lt;/span&gt;
    &lt;span class=&quot;apres&quot;&gt;Après&lt;/span&gt;
&lt;/div&gt;
.change .apres, .change:hover .avant {
    display : none;
}

.change:hover .apres {
    display : block;
}
Pas accessible du tout (enfin, tout dépend l'utilisation que tu en fait, si c'est pour autre chose que du contenu, ça pourrait éventuellement être utilisé...) :
&lt;div id=&quot;test&quot;&gt;&lt;/div&gt;
#test:before {
    content:&quot;Coucou les gens !&quot;;
}

#test:hover:before {
    content:&quot;En fait, non... pas coucou...&quot;;
}
Sujet clos
Aller à