Enigme

Je propose souvent des énigmes avec réponse au survol de la question; voyons le code :

L’énigme :
Soit un pont de 4 kilomètres de long, capable de supporter un maximum de 10 000 kilogrammes. Un camion de marchandises pesant exactement 10 000 kilogrammes s’y engage. À mi-chemin, un moineau pesant 30 grammes se pose sur le camion, pourtant le pont ne s’écroule pas.
Pourquoi ?

Réponse : Avant que l’oiseau ne se pose sur le camion, celui-ci aura consommé plus de 30 g d’essence.

<p id="q1">L'énigme :<br>Soit un pont de 4 kilom&egrave;tres de long, capable de supporter un maximum de 10 000 kilogrammes. Un camion de marchandises pesant exactement 10 000 kilogrammes s&rsquo;y engage. &Agrave; mi-chemin, un moineau pesant 30 grammes se pose sur le camion, pourtant le pont ne s&rsquo;&eacute;croule pas.<br />Pourquoi ?</p>
<p id="r1">R&eacute;ponse : Avant que l&rsquo;oiseau ne se pose sur le camion, celui-ci aura consomm&eacute; plus de 30 g d&rsquo;essence.</p>
<style><!--
#r1{opacity:0;}
#q1:hover ~ #r1{opacity:1;}
--></style>

Le paragraphe question q1 est visible et celui de la réponse r1 est invisible (opacity:0; soit transparente).

Au survol du paragraphe q1, le paragraphe réponse r1 devient opaque (opacity:1;)

On peut aussi modifier la hauteur du cadre du texte, pour cacher la partie réponse et, au survol, augmenter la hauteur afin de faire apparaître cette réponse.

- J'ai la langue qui saigne.
- Voyons, qu'est-ce qui t'arrive?
- On m'a coupé la parole.

<p id="ph1">- J'ai la langue qui saigne.<br /> - Voyons, qu'est-ce qui t'arrive?<br /> - On m'a coup&eacute; la parole.</p>
<style><!--
#ph1{width:17vw; height:2.5vw; font-size:1vw; overflow:hidden; transition:all 1s linear;}
#ph1:hover{height:4.5vw;}
--></style>

Octobre: on change d'heure pour faire des économies d'énergie.
Novembre: ta mairie installe des décorations de Noël visibles depuis l'espace !

Inutile de me dire ce que je dois faire ou ne pas faire ...
je ferai toujours comme j'ai envie !