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>&#149;</span> Lorem Ipsum I.</a></li>
<li><a href="#"><span>&#149;</span> Lorem Ipsum II.</a></li>
<li><a href="#"><span>&#149;</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


Copyright © 2004 Vít Dlouhý, Všechna práva vyhrazena ®
XHTML 1.1, CSS 2.1, Dogma W4