ICI header("Location: http://www.mytesting.fr ");

FAIRE APPARAITRE LES REPONSES A DES QUESTIONS AVEC LA POINTE DE LA SOURIS.

par André MARINI 4 Novembre 2017, 14:21 Texte

Cette forme de questionnaire à réponses éphémères et simplement visibles au passage de la souris peut s'avérer bien pratique pour donner une définition à un mot ou à une phrase d'un texte que l'on veut expliciter sans qu'il soit directement visible.

 

Il suffit alors d'insérer le code dans le texte en html avant le mot ou la phrase.

 

Les réponses sont en rouge parce que j'ai indiqué "red" mais on peut en changer.

<!DOCTYPE html>
 
<html lang="fr">
<head>
   <meta charset="utf-8">
   <title>Titre de la page</title>
<style>
 
h1 { position: relative; }
h1:hover { color: transparent; }
 
h1:hover:after {
    content: attr(data-hover-response);
    color: red;
    position: absolute;
    left: 0;
 
}
</style>
</head>
<body>
 
<h1 data-hover-response="
Nous sommes samedi."> Quel jour de semaine sommes nous ?  </h1>
  
  <h1 data-hover-response="
4 novembre 2017."> Quelle date ?  </h1>
  
  
 <h1 data-hover-response="
Le temps est gris."> Quel temps fait-il ?  </h1>
  <h1 data-hover-response="
il fait à peine 12 degrés."> Quelle est la température extérieure ?  </h1>
</body>
</html>

Titre de la page

Quel jour de semaine sommes nous ?

 

Quelle date ?

 

Quel temps faut-il ?

 

Quelle est la température extérieure ?

Haut de page