Aller au contenu

Définition d'un mot en une phrase


v4np13

Sujets conseillés

Bonjour,

je cherche la posibilité de donner une définition d'un mot. J'ai essayé avec l'acronym et la propriété hover de a, mais il coupe ma définition à la moitié. Comment pourrais-je contourner cette limite en XHTML/CSS (pas de JS) ? Il faudrait surement que je crée une class definition pour faire aparaitre le texte en dessous, mais je ne vois pas comment je pourrais faire pour afficher/cacher en fonction du :hover (propriété du lien uniquement à ma connaissance).

Merci d'avance

Pierrick

Lien vers le commentaire
Partager sur d’autres sites

Peut être un

<a href="">Terme <span>Définition</span></a>

Avec en css:

a
{
overflow:hidden;
}

a span
{
display:block;
text-indent:-2000em;
}

a:hover span
{
text-indent:0;
}

Strictement pas sémantique (vive les liste de définitions) et pas encore testé.

Modifié par Arkh
Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Dans le même style, testé IE et FF


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Test</title>

<style type="text/css">

a.bulle {
text-decoration: none;
color: red;
position: relative;

}

a.bulle span {
display: none;
}

a.bulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}

a.bulle:hover span {
color: green;
position: absolute;
left: 10px;
top: 20px;
background: yellow;
width: 300px;
display:inline;
}

</style>

</head>

<body>
<p >
<a class="bulle" href="#"> <span> je suis la définition du mot ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi egestas pede ac quam. Etiam lectus elit, vehicula et, ornare in, gravida a, urna. Donec vel ipsum in pede adipiscing scelerisque. Mauris nunc magna, iaculis non, mattis in, commodo at, nibh. Duis ultricies aliquam urna. Duis luctus lorem id est.</span> mot</a>
</p>
</body>

</html>

Si ça peut t'aider.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...