Kilka osób z forum grafart.org poprosiło mnie o kilka porad dotyczących hovera, czyli najazdu. Niby krótki i prosty temat a można wykorzystać na setki sposobów. W tym artykule postaram się przybliżyć chociaż kilka ciekawych zastosowań.

Podstawy

Dla niektórych hover, kończy się na pseudoklasie CSS, dzięki której można zmienić kolor linka lub podmienić obrazek. Jakby nie patrzeć jest to główne zastosowanie. Wystarczy, ze napiszemy:

i już po najeździe link zmienia nam kolor z czerwonego na niebieski.

Z obrazkami jest podobnie:

Wszystko działa, jest cacy. Wszystko? No właśnie nie. W przypadku z obrazkami pojawia się problem w postaci chwilowego czekania na wczytanie się drugiego obrazka. Czy da się to naprawić? Oczywiście, że tak - do tego służy technika sliding-doors, o której za kilka akapitów napiszę.

Można sobie jeszcze zadać pytanie czy tylko <a> można nadać stan pseudoklasę hover. W każdej normalnej, nowoczesnej przeglądarce można hover nadawać wszystkiemu, ale oczywiście jest IE. Na szczęście i to da się ominąć.

Sliding doors

Ta technika ma na celu przeciwdziałanie tej chwili czekania na wczytania nowego obrazka. Jak? W najbanalniejszy sposób jaki się dało wymyślić - zamiast korzysać z dwóch obrazków skorzystano z jednego na którym są pokazane oba "stany" obrazka. Mając taki obrazek za pomocą CSS pozostało nam już przesunąć tło.

To do roboty - najpierw przygotowywujemy obrazki. Na górze dajemy wygląd po najeździe, a na dole przed. Oto przykład:

Następnie w naszym dokumencie umieszczamy ten obrazek jako tło <a>

Pozostaje nam już tylko dopisać styl:

Przykład do podejrzenia tutaj.

A co z IE?

W IE, w pewnych sytuacjach można albo kombinować jak koń pod górkę, żeby najazd był zawsze na link (polecam stronę cssplay.com), albo pójść na łatwiznę i dojść do dwóch wniosków:

• najczęściej podświetlenie elementów jest tylko elementem ozdobnym, a jeśli nie (np. rozwijane menu) to strona jest tak skonstruowana, że fakt nie działania tego menu nie przeszkodzi w nawigacji
• ilość ludzi, którzy mają IE z wyłączonym javascript jest śladowa

Zdając sobie sprawę z tych dwóch rzeczy (szczególnie drugiej częście pierwszego punktu) możemy spokojnie przerzucić odpowiedzialność za hovery w IE na jQuery.

A w jQuery, gdyby nam się zachciało, że podświetlać <li> najpierw w stylu musimy przygotować sobie klasę, np. najazd, następnie wystarczy napisać:

Oczywiście w klasie najazd piszemy jak chcemy żeby nasze <li> wyglądało po najeździe.

Przykład możecie zobaczyć tutaj. W IE najazd też działą, mimo, że ne ma żadnego a.

Menu rozwijane

Zrobimy sobie menu, którego głowne pozycje będą w poziomie, a po najeździe a poszczególne pozycje pojawi nam się podmenu. Nie będzie wielkim zaskoczeniem jesli powiem, że pomoże nam jQuery.

Teraz to ostylujemy tak, żeby ułożyć wszystko tak jak chcemy oraz żeby ukyć te wewnętrzne listy:

Na koniec pozostaje nam już tylko zabawa z jQuery. Chodzi nam o to, żeby po najechaniu na odpowiednie <li> pokazał się odpowedni zagnieżdzony <ul>. Żeby to osiągnąć piszemy w następujący skrypcik:

Powinno działać tak jak na przykładzie.

Podsumowanie

Mam nadzieję, że dzięki temu poradnikowi nie będziecie mieć już problemów z tym jak używać hover. Oczywiście to co przedstawiłem to tylko kilka przykładów - reszta jest ograniczona tylko Waszą wyobraźnią.