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
- Mon pc s'allume mais lécran reste noir sans bip - Guide
- Combien de temps reste une story sur facebook - 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>
