Une info bulle qui reste ouverte
Résolu
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>
2 réponses
-
<span id="a">aaaaaaa</span>
<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...<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> -
-
-
-
-
