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

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