Hover efekt na řádku tabulky

Pachollini, 7. října 2004, 22:37

Kterak jednoduše způsobit, aby se řádek tabulky po najetí myší zvýraznil? Na tuto otázku odpovídá článek Efektivní rollover (hover) na řádku tabulky na Choseho blogu, na který jsem narazil se značným zpožděním po publikaci. Chose předvádí 4 řešení tohoto efektu, která fungují i pro MSIE, jehož podpora pseudotříd je, jak obecně známo, prachbídná, takže se nedá použít jednoduchá CSS definice typu tr:hover {color:yellow;}, která ve slušných prohlížečích funguje. Všechna řešení používají klientský JavaScript, první poměrně jednoduše, poslední oproti tomu pro dosažení optimálního výsledku sofistikovaně zapojuje rozhraní DOM a obohacuje stránku o téměř kilobajtík kódu. Těm, kterým to připadá příliš komplikované, nabízím řešení č. 5, které pro MSIE využívá behaviors, proprietární technologii Microsoftu, jež umožňuje zmiňovanou slabinu bohužel stále ještě nejrozšířenějšího prohlížeče poměrně snadno obejít. (Jak krásná německá věta! ;-) Vychází z postupu, na který upozorňuje např. Lukáš Mačí ve spotu :hover pro Internet Explorer pomocí behavior.

Celé kouzlo spočívá v připojení souboru hover.htc (musí mít příponu .htc nebo content-type: text/x-component) k CSS. Tento magický soubor způsobí, že se dotyčnému prvku po najetí myší přidá třída .hover, pro kterou se v CSS nadefinují stejná pravidla, jako pro pseudotřídu :hover. Nejspíš není třeba dodávat, že ten samý soubor vyřeší absenci pseudotřídy :hover i ve všech obdobných případech a lze jej tedy použít např. i pro vysouvání drop-down menu, kde není nutné zapojovat IMHO příliš složité JavaScriptové konstrukce, jako je třeba ta, kterou používá Nick Rigby v článku Drop-Down Menus, Horizontal Style v magazínu A List Apart.

Celé to vypadá následovně:

CSS předpis:

tr {behavior: url(hover.htc);}
tr:hover, tr.hover {background:yellow;}

„Slušné“ prohlížeče použijí pseudotřídu :hover a neznámou vlastnost behavior budou ignorovat, MSIE se zachová přesně obráceně.

Soubor hover.htc:

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="add_hover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="rem_hover()" />
<script type="text/javascript">
  function add_hover() 
  	{
  	element.className = element.className + " hover";
  	}
  
  function rem_hover() 
  	{
  	element.className=element.className.substr
  	  (0,element.className.indexOf(" hover"));
  	}
</script>

Toť vše. Ukázku funkčnosti můžete vidět např. ve výsledcích hospodaření firmy Adar.

Co vy na to?

zobrazit všechny komentáře

Aktuální Seky

.