Zdarzenia myszki – pointer-events CSS

kursy tutoriale

Kategoria wpisu Efekty i skrypty CSS, Interfejs, Kurs HTML Tagi: , , , , on przez .



Właściwość pointer-events określa jak na dane zdarzenie wywołane z użyciem kursora myszy powinien reagować konkretny obiekt HTML.
Chodzi o zdarzenia takie jak:

  • kliknięcie na obszar elementu HTML
  • najechanie kursorem na obszar elementu HTML
  • dotknięcie elementu HTML na ekranie dotykowym bez użycia myszki

Wartości przyjmowane

Funkcja pointer-events posiada następujące wartości:

  • none uniemożliwia kliknięcie obiektu, wyłącza wszystkie efekty takie jak :hover
  • auto domyślne ustawienie, włącza wszystkie efekty (events), jeżeli rodzic ma ustawioną wartość none a dziecko auto odzyskuje ono domyśle ustawienia
  • inherit dziedziczy właściwości elementu nadrzędnego, rodzica

Jak działa pointer-events – przykład

Często przy pracy nad stroną zdarza, się że warstwa wierzchnia blokuje nam efekty elementu znajdującego się pod spodem. Jest to szczególnie częste przy pracy z JavaScript i jego bibliotekami (np. jQuery) kiedy posiadamy np. rozwijane pola, przesuwane pola.

Jak sobie z tym poradzić?

Na początek trzeba ustalić, który element znajduje się nad naszym obiektem. Dla przykładu przyjmijmy, że jest to DIV nad DIV.

Powyższy przykład w HTML wygląda następująco:

Z kolei w CSS przedstawia się tak:

 

Jak widać zielony element znajduje się na spodzie oznacza to, że w tym układzie nie możemy na nim wywołać żadnego efektu (przynajmniej na zakrytej części).

Teraz zmodyfikujemy kod tak byśmy mogli wywołać prosty efekt np. hover

W HTML

Kod CSS

Teraz wyłączymy warstwę przykrywająca:

CSS

Efekt wyłączenia warstwy przykrywającej uzyskaliśmy dzięki:

Interpretacja przez przeglądarki

Funkcja obsługiwana jest przez przeglądarki:

ChromeSafariFirefoxOperaIEAndroidiOS
TAK4.03.615.011+TAKTAK

Dodatkowe tagi:
Click through a DIV to underlying elements

Przeczytaj również

Pozycjonowanie tekstu i obrazków z pomocą CSS W jednym z poprzednich wpisów pokazałam w jaki sposób wyśrodkować obrazek lub tekst wykorzystując do tego czysty HTML. Tym razem pójdę o krok dalej i ...
Mieszanie kolorów z selektorem mix-blend-mode Właściwość CSS mix-blend-mode określa sposób łączenia się ze sobą elementu nadrzędnego np. obrazka z tłem umieszczonym pod nim. Efekt końcowy jest pod...
Animacja ikon, obrazków na przykładzie dłoni Dziś postaram się pokazać jak w prosty sposób uzyskać efekt animowanej ikony (małego obrazka) na stronie internetowej. Na początek warto zapoznać s...
Tabele w HTML Tabele są jednym z podstawowych znaczników w języku HTML. Przed wejściem stron RWD tabele HTML były najczęściej spotykanym obiektem na stronie. Chyba ...