Général

Les PCRE

Les POSIX

Pratique

Linux

Spécial php

Les billets de fred

Une légende au passage de la souris... en CSS

Une légende sur un mot, sur un lien...

Je vais vous donner une petit code, tout en CSS pour réaliser un affichage de légende sur un lien, ou une défintion un un mot, ou encore une image sur une chaîne, au passage de la souris.

Le code CSS à placé dans le head de votre page (ou en feuille externe)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a {
text-decoration: none;
}
a:hover {
background: none;
}
a span {
display: none;
}
a:hover span {
display: inline;
position: absolute;
margin-top:25px;
left: 100px;
width: 200px;
border:1px solid #009900;
background:#ffffff;
text-align: center;
color: #ff0000;
}
-->
</style>
</head>


Dans le body, votre texte et vos liens...

<body>
Voici une phrase avec un <a href="#">MOT<span>La définition de mon mot est placée ici</span></a> pour lequel on affichera la défintion au survol de la souris.
<br />
<br />
Une autre phrase en dessous, juste pour montrer le passage au-dessus du texte de la boite d'info et blabla et reblabla...
<br />
</body>


Et voilà, aussi simple que ça !
ADAM Benjamin 2008 | Admin