Přeskočit hlavičku [accesskey=1]
Rollover efekt v seznamech UL
Nacházíte se zde: Novinky » Weblog » 2004 » Leden » Rollover efekt v seznamech UL
Velice jednoduše, bez jakýchkoliv hacků lze vytvořit dojem „rollover“ efektu s
odrážkami v seznamech ul
, li
. Na tento jednoduchý trik nedávno upozornil
Stuart Robertson v článku Bullet Time Again.
Já jsem si jeho postup vypůjčil a malinko doupravil (zjednodušil jsem jej a pro případ vypnutí
stylů umístil do seznamu).
Postup
Pomocí číselného kódu •
se simuluje odrážka (typu list-style-type: disc
).
Vše je obaleno příkazem span
, pomocí něhož nastavujeme „rollover“ efekt.
Poznámka: V Mozille i Opeře lze přiřadit pseudo-třídu :hover
i jiným prvkům, než je odkaz.
Šlo by tedy použít např. li:hover {…}
, Internet Explorer by však nepochodil.
CSS kód
ul { margin: 0; padding: 0; list-style: none } a { color: #000; text-decoration: none } a:hover { color: #e03 } a span { color: #e03 } a:hover span { color: #000 }
XHTML kód
<ul> <li><a href="#"><span>•</span> Lorem Ipsum I.</a></li> <li><a href="#"><span>•</span> Lorem Ipsum II.</a></li> <li><a href="#"><span>•</span> Lorem Ipsum III.</a></li> </ul>
Trvalý odkaz: http://www.vitdlouhy.cz/weblog/2004/01/css-list-rollover.html
Vloženo: 18.1.2004, 11:15