jQuery: Aplikace pseudotřídy hover na cokoliv | Profi Magazín - webdesign, ikony, jquery, Textpattern


jQuery: Aplikace pseudotřídy hover na cokoliv

Jiří Melčák | 7. září 2008 | 21 040× zobrazeno | 6 komentářů
Hodnocení: 4.1 (9 hlasů)

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).

Komentáře

Jerry
8. září 2008, 13:48

Bere to i IE6?

Redaktor ovsem.netAutor článku 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)

Redaktor ovsem.netAutor článku 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 :)

Redaktor ovsem.netAutor článku 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

Pracovní projekty

Bleskovky

Kniha: jQuery Kuchařka programátora

Kniha: jQuery Kuchařka programátora

Rád bych upozornil na zajímavou knihu, o kterou jsem zavadil. Jedná se o knihu s názvem jQuery Kuchařka programátora a je tedy zřejmé, co bude jejím obsahem. Nemá moc smysl cokoliv popisovat. Raději hned mrkněte do obsahu kapitol nebo zkoukněte ukázkovou kapitolu v PDF. Běžná cena je 590 Kč. Momentálně ji můžete online koupit za 502 Kč.

Textpattern.com redesignoval web

Textpattern

Oficiální stránky mého oblíbeného CMS Textpattern prošly redesignem - www.textpattern.com. Ještě je potřeba kompletně redesignovat celý výchozí admin a mohl by se Textpattern lehce vrátit na výsluní. Poslední verze Textpattern 4.2.0 sice podporuje skiny pro admin, ale abych byl upřímný, tak drtivá většina nestojí ani za stažení. Budu muset dodělat tu svou představu o adminu Textpatternu.

Guide to CSS support in e-mail clients

Guide to CSS support in e-mail clients

Tvorba HTML e-mailu rozesíláného především v podobě newsletteru představuje občas nemalé trápení a ladění, aby e-mail vypadal přesně tak, jak chcete nebo jak jste zamýšleli. Na serveru campaignmonitor.com jsou k dispozici tabulky (i ke stažení v PDF, ZIP) s podporou CSS selektorů a vlastností, které lze v nejpoužívanějších e-mailových klientech bezpečně používat.

Fascinující pohled na svět

The Big Picture

Na serveru Boston.com můžete v kategorii The Big Picture vidět fotografie zachycující atmosféru různých zemí, národností, přírodních jevů i katastrof, politiku, válku atd..

Vývoj produktů Apple v letech 1977-2008

Vývoj produktů Apple

Zajímavou podívanou vám nabídne článek, který shrnuje vývoj výrobků Apple, od stolních počítačů přes notebooky, až po jednotlivé periferie jako klávesnice a myš.

Zobrazit další bleskovky »

O všem na internetu