Une info bulle qui reste ouverte
Résolu
gwenm
Messages postés
594
Date d'inscription
Statut
Membre
Dernière intervention
-
gwenm Messages postés 594 Date d'inscription Statut Membre Dernière intervention -
gwenm Messages postés 594 Date d'inscription Statut Membre Dernière intervention -
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
- Combien de temps reste une story sur facebook - Guide
- Mon pc s'allume mais lécran reste noir sans bip - Guide
- Wifi info view - Télécharger - Divers Réseau & Wi-Fi
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 ">
Hello, j' ai mis tons script à la place du mien, mais il n' y a pas du tout d' info bulle..
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>
