Hover efekt pro seznam odkazů
16. 07. 2007 | Redakce Interval.cz | Pro CSS | Komentáře: 4
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>
Další aktuální články na interval.cz
- Malware: android pod palbou, mobily v ohrožení?
- Pozvánka na Microsoft TechDays 2012
- Reklamní slepota: co to je a jak s ní bojovat?
- Pět důvodů, proč vybrat redakční systém Drupal
- Čeština pro WordPress 3.3.1 k dispozici
Tematicky související články
- Vertikální hover menu
- Horizontální vysouvací menu
- Hover nápověda
- Kartičkové hover menu
- Kalendář v CSS
Dejte vědět i ostatním o článku
Komentáře ke článku
Datum vložení: 16. Září 2009, 12:28:05
Vá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.
Datum vložení: 16. Únor 2011, 16:24:49
Nechci 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.
Datum vložení: 16. Únor 2011, 16:25:34
""
Datum vložení: 16. Únor 2011, 16:27:12
Tak 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ří
