Une info bulle qui reste ouverte
Résolu
gwenm
Messages postés
640
Statut
Membre
-
gwenm Messages postés 640 Statut Membre -
gwenm Messages postés 640 Statut Membre -
Bonjour, je voudrais faire en sorte qu' une info bulle reste ouverte pour pouvoir y mettre plus de contenu et un lien vers une page ou autre...
Voici ce que j' utilise :
CSS
HTML
Voici ce que j' utilise :
CSS
a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
top: 2em;
left: 1em;
background: white;
-moz-border-radius: 10px;
text-align: center;
color: grey;
padding: 2px;
}
HTML
<p>Survolez le mot <a class="info" href="#">"Toto" <span><img src="images/sudoku.gif" ><p>un petit garçon sympathique</span></a>
A voir également:
- Une info bulle qui reste ouverte
- Crystal disk info - Télécharger - Informations & Diagnostic
- Info pc - Guide
- Wifi info view - Télécharger - Divers Réseau & Wi-Fi
- I-info - Télécharger - Médias et Actualité
- Info@infos.bouyguestelecom.fr - Forum Bouygues Télécom
2 réponses
<span id="a">aaaaaaa</span>
<input type="submit" name="aa" onMouseOver="a.innerHTML='bbbbbbbbbbbb';" value="de contenu ">
<input type="submit" name="aa" onMouseOver="a.innerHTML='bbbbbbbbbbbb';" value="de contenu ">
Salut,
ton code fonctionne bien, la seule petite erreur c'est que ton images tu la met trop bas, donc du coup le hover ne fonctionne pas... essayes de mettre le top à 1em...
ton code fonctionne bien, la seule petite erreur c'est que ton images tu la met trop bas, donc du coup le hover ne fonctionne pas... essayes de mettre le top à 1em...
<style>
a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
top: 1em;
left: 1em;
background: white;
-moz-border-radius: 10px;
text-align: center;
color: grey;
padding: 2px;
}
</style>
<p>Survolez le mot <a class="info" href="#">"Toto" <span><img src="images/allergies.png" ><p>un petit garçon sympathique</span></a>
