Hover efekt pro seznam odkazů
Chcete-li ozvláštnit seznam odkazů, vhodným prvkem může být například tzv. hover efekt který známe převážně z různých typů tlačítek.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Christian Watson. Bližší popis najdete v článku How to Create a Block Hover Effect for a List of Links.
CSS
#links ul
{
list-style-type: none;
width: 400px;
}
#links li
{
border-top: 1px solid #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a
{
color: #3366CC;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a
{ /* zprovozní hover efekt i pro IE */
width: 400px;
}
#links li a:hover {
background: #f6f6f6;
}
#links a em
{
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span
{
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
XHTML
<html>
<body>
<div id=“links“>
<ul>
<li><a href=“#“ title=“Text“>Tabulka s posuvníkem …
<em>Tabulka u…</em>
<span>10. 7. 2007</span></a></li>
<li><a href=“#“ title=“Text“>Odstránkování
<em>Navigace ve…</em>
<span>2. 7. 2007</span></a></li>
<li><a href=“#“ title=“Text“>Drobečková navigace
<em>Drobečková navigace je…</em>
<span>24. 4. 2007</span></a></li>
</ul>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Jak zabezpečit váš chytrý telefon před kybernetickými hrozbami
30. listopadu 2023 -
-
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024
Petr B.
Zář 16, 2009 v 12:28Vámi publikovaný ,hover efekt‘ v tom příkladě již hotovém pod Safari na Macu nechodí. Když pominu ještě češtinu. Na stránkách Christiana Watsona to však chodí bez problémů. I tak děkuji pane Kučero.
Petr B.
Luboš B.
Úno 16, 2011 v 16:24Nechci si hrát na chytrýho, ale problém s češtinou jsem kdysi řešil nastavením v:
Tehdy mi češtinu špatně zobrazoval i FireFox.
Luboš B.
Úno 16, 2011 v 16:25„“
Luboš B.
Úno 16, 2011 v 16:27Tak snad napotřetí se to ukáže, píšu to bez závorek:
„meta http-equiv=“content-type“ content=“text/html; charset=windows-1250″
Místo uvozovek patří