Question-Réponse

 Ne retenez que le principe car il faut adapter les dimensions et positionnements à votre article.

La question.

Réponse au survol

Le texte de la réponse, qui est invisible et qui apparaît au survol du mot "réponse".
Question et réponse sont alignées.

---

La question.

Réponse au survol

Le texte de la réponse, qui est invisible et qui apparaît au survol du mot "réponse".
Question, le mot "Réponse" et le texte de la réponse sont les uns sous les autres.

---

<div style="width: 1200px; height: auto; margin: 50px auto; text-align: left;">

<p id="q1">La question.</p>

<p id="sv1">R&eacute;ponse au survol</p>

<p id="rp1">Le texte de la r&eacute;ponse, qui est invisible et qui appara&icirc;t au survol du mot "r&eacute;ponse".<br />Question et r&eacute;ponse sont align&eacute;es.</p>

</div>

<div style="width: 1200px; height: auto; margin: 50px auto; text-align: left;">

<p id="q2">La question.</p>

<p id="sv2">R&eacute;ponse au survol</p>

<p id="rp2">Le texte de la r&eacute;ponse, qui est invisible et qui appara&icirc;t au survol du mot "r&eacute;ponse".<br />Question, le mot "R&eacute;ponse" et le texte de la r&eacute;ponse sont les uns sous les autres.</p>

</div>

<style><!--

#q1{float:left; width:120px; height:auto; font-size:20px; transform:translate(0px,0px);}

#sv1{float:left; width:220px; height:20px; font-size:20px; color:green; transform:translate(20px,0px);}

#rp1{position:absolute; width:800px; height:auto;text-align:left; font-size:20px; opacity:0; transform:translate(350px,0px); }

#sv1:hover ~ #rp1{opacity:1;}

#q2{width:120px; height:auto; font-size:20px; transform:translate(0px,0px);}

#sv2{width:220px; height:20px; text-align:left; font-size:20px; color:green; transform:translate(0px,0px);}

#rp2{position:absolute; width:800px; height:auto;text-align:left; font-size:20px; opacity:0; transform:translate(0px,0px); }

#sv2:hover ~ #rp2{opacity:1;}

--></style>