Hover nápověda
Toto řešení najde využití například v textech obsahujících hodně zkratek či odborných termínů. Nápověda se zobrazí okamžitě při najetí myší a uživatel tak není obtěžován načítáním jiné stránky.
Zde si můžete prohlédnout výsledek.
Toto řešení bylo publikováno na webu psacake.com. Bližší popis najdete v článku pure css popups.
CSS
p
{
text-align: justify;
}
p a
{
font-weight: bold;
cursor: help;
background: #acf;
color: black;
text-decoration: none;
}
p a:hover
{
background: #8ad;
}
p a span
{
position: relative;
font-size: 90%;
font-weight: normal;
text-align: left;
}
p a span span
{
display: block;
position: absolute;
visibility: hidden;
top: 2em;
left: .5em;
padding: .2em .5em;
width: 10em;
background: #fca;
border: solid #b86 2px;
}
p a:hover span span
{
visibility: visible;
}
XHTML
<html>
<body>
<p>Lorem ipsum dolor sit amet, <a href=““ class=“help“><span><span>Nullam lacus nisl, pellentesque blandit, hendrerit eu, commodo vel, purus.</span></span>consectetuer</a> adipiscing elit.</p>
</body>
</html>
Michal Jura
Úno 13, 2010 v 11:03Může mi prosím někdo poradit. Proč toto řešení nefunguje v Opeře?. IE6 a výše, Firefox i Chrome jsou v pohodě. U Opery se mi robrazí nápověda maximálně u prvního slova nebo vůbec. Popis se načítá z databáze a jsou v něm použity html značky. Zde je stránka o kterou se mi jedná tam použity http://www.slovensky-cuvac.biz/chovni_psi.php . Děkuji za radu.