Jump to content

Définition d'un mot en une phrase


Recommended Posts

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

Link to post
Share on other 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é.

Edited by Arkh
Link to post
Share on other 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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...