jQuery: Aplikace pseudotřídy hover na cokoliv
Občas je nutné dát uživateli www stránek zpětnou vazbu, když najedou myší nad nějaký element na stránce. V CSS pro tuto událost existuje pseudotřída :hover. Díky ní je možné např. změnit barvu elementu <a> při najetí myší nad daný odkaz. Ovšem zde webmaster naráží na nedostatky některých prohlížečů - konkrétně Internet Explorer 6 a nižší, které nepodporují pseudotřídu :hover na libovolný element v DOMu, ale pouze na element a <a> několik málo dalších (např. <li>). U moderních prohlížečů je podpora této pseudotřídy již naštěstí standardem. Pokud však chceme, aby ani uživatelé IE6 a nižších nepřišli zkrátka, máme zde jednoduché řešení pomocí javascriptové knihovny jQuery.
V jQuery existuje událost pro tuto příležitost hover(over,out). Kdykoliv myší najedete nad specifikovaný element provede se první část specifikované funkce over. A naopak, když daný element ztratí hover (ukazatel myši je mimo daný element), provede se druhá část specifikované funkce. jQuery hover zároveň kontroluje, zda se ukazatel myši stále nachází nad daným elementem, případně zda se pohybujete uvnitř dalších vnořených elementů (např. <img> uvnitř <div>), což v mnohých jiných řešeních znamenalo chybu a hover byl ukončen, ač jste stále byli nad specifikovaným elementem. jQuery má tohle ošetřeno. Podívejme se tedy na konkrétní kód:
$(document).ready(function() { $('p').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); } ); });
Nejprve tedy definujeme, že hover se má testovat pro každý element <p>, tedy odstavec. Zápis $(this) zastupuje specifikovaný element, abychom jej nemuseli opakovat kdekoliv dále v kódu - ušetří to spustí práce zejména u rozsáhlejších skriptů. První polovina kódu tedy obsahuje funkci, která se má provést při detekci stavu hover a to $(this).addClass('hover'). To způsobí, že daný <p> element, nad nímž se pohybuje myš dostane třídu hover, kterou si už jen stačí nadefinovat v CSS. Druhá část kódu naopak odstraní onu přidanou třídu hover z daného elementu v okamžiku, kdy definovaný element <p> ztratí hover (kurzor myši již není nad daným elementem).
Předpokládejme, že máme 3 odstavce a myší jsme najeli nad první odstavec, pak v dané chvíli bude HTML kód vypadat takto:
<p class="hover">Text první odstavce</p> <p>Text druhého odstavce</p> <p>Text třetí odstavce</p>
Přidanou CSS třídu hover (class="hover")si samozřejmě můžete pojmenovat, jak uznáte za vhodné. Jen je nutné pak pro tuto třídu nadefinovat vlastnosti, např. tedy:
p.hover { background-color:#7b7063; color:#fff; }
Tato CSS definice nám zajistí, že při hover události se daný odstavec podbarví definovanou barvou a barva písma se změní na bílou.
Zobrazit příklad (v novém okně)
S událostí hover jde samozřejmě provádět cokoliv nejen přidávat CSS třídu. Můžete manipulovat s obsahem daného elementu (přidat např. text uvnitř daného elementu, animovat daný element apod.). Stačí si jen hrát s kódem uvnitř daných funkcí události hover(over,out).
Pokud se vám líbil tento článek můžete Profi magazín odebírat pomocí RSS.
Možné související články:
Komentáře

Jiří Melčák
8. září 2008, 14:03
Ano, Jerry, zejména kvůli IE6 je tento článek. Samozřejmě existují jiná nejavascriptová řešení jako je použití .htc souboru, případně jiná řešení. Článek o hover.htc připravuji na tento týden.
Každopádně řešení pomocí jQuery ti zajistí tu nejširší možnou crossbrowser kompatibilitu a funkčnost, včetně IE6 a nižší.

jOhny
9. září 2008, 04:26
ako by sa dalo spravit pomocou jquery nieco take, ze ked hovernem cez urcity odkaz, da triedu inym veciam? chcel by som spravit daco take, ze ukaze na tag a ono to ukaze pribuzne tagy (da tam iny background alebo podciarknutie)

Jiří Melčák
9. září 2008, 04:37
jOhny: Jasně, že to jde. Chtělo by to vidět konkrétně tu stránku. Když tak pošli odkaz na mail a mrkneme na to spolu.

David Pirek
10. září 2008, 10:13
No jelikoz je rec o mem oblibenem tematu tak si taky ohreju svoji polivcicku :) na servru http://fungu.cz je mozne videt celou skalu pouziti hodne pokrocilich jquery implemetaci, takze “se doporucuji” k inspiraci :) jquery dokaze daleko vice nez “hover” efekty. Diky super velke komunite a stovkam pluginu se s malym usilim daji delat opravdove kouzla :)

Jiří Melčák
10. září 2008, 13:24
Ále, David sem zabrousil ;) Ahoj. No neboj, lidičky ví, že to umí v podstatě všechno, jen čekají až o tom napíšu ;) Musím pěkně postupně.
Komentáře jsou uzavřeny