Zdarzenie onclick w CSS3

W CSS3 zostały wbudowane pseudoklasy, które m.in. pomagają obsłużyć takie zdarzenia jak znane z JavaScriptu onmouseover, onfocus. Ale czy istnieje możliwość obsługi kliknięcia, które jest jednym z najczęściej wykorzystywanych zdarzeń? Okazuje się, że częściowo można...



Częściowo, ponieważ obsługa tyczy się tylko elementu <a> i innego wybranego elementu z określonym atrybutem id. Jest to możliwe dzięki selektorowi :target, który odwołuje się do elementu, którego identyfikator jest identyczny z wartością umieszczoną po hash'u na pasku adresu, np. #element odnosi się do elementu id="element".

Wykorzystując linki do wartości zadanych po znaku # możemy manipulować wyświetlaniem różnych elementów.
<a href="#img1">Pokaż zdjęcie</a>
<img src="https://lh5.googleusercontent.com/-jgQXSYrlCZk/TaDAqsmiAFI/AAAAAAAACwk/T7LjUHF_ZD4/s912/IMG_4188.jpg" id="img1" />
Domyślnie ukryjemy zdjęcie, zaś po kliknięciu w link zostanie ono pokazane.
img[id] {display:none;}
img[id]:target {display:block;}
A oto działający przykład:

Pokaż zdjęcie

Dodatkowo można pobawić się jeszcze animacjami (transitions lub animations) dla polepszenia efektu. Niestety skok do miejsca, w którym pojawia się element docelowy jest wbudowany w mechanizm przeglądarki, więc w celu usprawnienia obsługi (np. płynnego przesuwania scrollbara) należy posłużyć się już JavaScript'em.

Polecam przyglądnięcie się także dużo dalej idącym przykładom zastosowania tej metody - jak na przykład przygotowana przez Roberto Breve CSS'owa wersja Lightbox'a.

Jak widać w CSS'ach siła.

Prześlij dalej:

2 komentarze:

Błażej Katarzyński pisze...

Po kliknięciu obrazek się pokazuje, a jak zrobić, żeby po ponownym kliknięciu obrazek został jeszcze raz ukryty? Bo raczej nie ma czegoś takiego jak podwójny target.

Michał Biniek pisze...

Najłatwiej zrobić na wyskakującym obrazku link do nieistniejącego targetu, lub do id np. głównego diva - np. #main. Wówczas zmieni się zależność :target i obrazek zniknie

Prześlij komentarz