Jednoduchý obrázkový hover v CSS

Dnes trochu prakticky – nějakou dobu se snažím vymyslet nějaký jednoduchý, funkční a kompatibilní způsob, jak vytvořit obrázkový hover efekt v CSS. Jeden hezký návod jsem našel zde, ovšem cosi mi na něm vadilo, tak ho malinko rozšířím a poupravím, takže teď si návod přečtěte, ať tak nějak víte. Budete to potřebovat k dalšímu postupu. Opravdu. A jak říkají mí američtí bratři: for real!

Opravdu si to přečtěte.

Nejprve si upravíme HTML kód do modernější varianty, a upravíme popisky na tlačítkách (jinak nejsou moc kúl), tedy použijeme moderní seznamy (<ul> <li>) a výběr popisků nechám na vás. HTML kód zde:

<ul id="menu">
	<li><a href="#">První věc</a></li>
	<li><a href="#">Super věc</a></li>
	<li><a href="#">Přjíemná věc</a></li>
	<li><a href="#">Nechtěl bych</a></li>
	<li><a href="#">Atakdále</a></li>
</ul>

Hlavní nedostatek v originálním návodu pro mě představuje nemožnost výstavby horizontálního menu. Proto tedy již od začátku tvořím menu právě horizontální.

Protože bez CSS kódu by to jaksi nebylo ono, přikládám jej zde též. Podrobněji popíši níže.

#menu li {
	list-style-type: none;
	padding: 0; margin: 0;
	float: left;
	}

#menu a {
	display: block;
	width:108px;
	margin: 0;
	padding:18px 0 22px 5px;
	font-size: 12px;
	color: white;
	background: url("button.png") 0 0 no-repeat;
	text-decoration: none;
	}

#menu a:hover {
	background-position: -113px 0;
	}

Hover funguje na principu posouvání jednoho obrázku, tedy jeden obrázek obsahuje rovnou oba stavy a má dvojnásobnou šířku. Toto opatření je zde hlavně kvůli rychlosti načítání, kompatibilitě a v extrémních případech i rychlosti prohlížeče (posunout obrázek je méně náročné, než jej vyměnit).

Nyní k CSS: Protože máme seznam, který chceme uspořádat vedle sebe, hned po odstranění nežádoucích prvků seznamu uvedeme vlastnost float: left;. V definici #menu a musíme nastavit display: block;. Ani moc nevím proč, ale bez toho to moc nefunguje. Nejspíš to bude něco s šířkou elementu =). Dále odkazu musíme nastavit fixní šířku, a samozřejmě pozadí (nezapomeňte na posunutí pozadí – 0 0 no-repeat;). Dále je na vás volba fontu, barvy atd.

V dalším kroku (stav :hover) je potřeba jen nastavit posunutí pozadí o určitý počet pixelů – background-position: -113px 0;.
Že je to jednoduché?

Tento způsob je zaměřen hlavně na jednoduchost, praktičnost, a hlavně kompatibilitu (bez potřeby JavaScriptu v IE). Kód je krátký a přehledný a doufám, že někomu pomohl. Dříve jsem se s takovým kódem trápil pěkně dlouho a bezúspěšně. Dnes jsem si řekl, že bych už na to měl přijít. No a přišel =).