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
-
inPage AI: Revoluční nástroj pro tvorbu webů
3. července 2024 -
Rychlost serveru: Klíč k lepšímu umístění ve vyhledávačích
7. června 2024 -
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
1,5 milionu CZ domén: Co to znamená pro český internet?
31. března 2025
Nejnovější
-
Nenechte se zaskočit TLS certifikáty na 47 dní
2. května 2025 -
Zrychlete svůj web s LiteSpeed a CZECHIA.COM
29. dubna 2025 -
-
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.