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>
Mohlo by vás také zajímat
-
Co je to VRAM a jak ji navýšit bez drahého upgradu?
20. srpna 2024 -
Rychlost serveru: Klíč k lepšímu umístění ve vyhledávačích
7. června 2024 -
-
Nové AI modely od Open AI a Google
22. května 2024
Nejnovější
-
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024 -
Znovuuvedení domény .AD
5. září 2024 -
Jak vybrat doménu: Co je dobré vědět?
2. září 2024 -
Proč je důležité tvořit obsah na váš web?
29. srpna 2024
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.