Zdarzenia myszki – pointer-events CSS

kursy tutoriale

Kategoria wpisu Interfejs, Kurs CSS, 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 ...
Zastosowanie właściwości outline Właściwość outline w zastosowaniu jest bardzo podobna do "border"(obramowanie) - podobnie jak ona stanowi formę obramowania (konturu) obiektu. Wyk...
Zmiana koloru linka po najechaniu kursorem –... Zmiana koloru linku () stanowi jeden z podstawowych efektów, jakie występują na stronie internetowej. Domyślnie tę cechę pos...
Odsyłacz pocztowy lub do telefonu HTML Jeśli chcesz na swojej stronie umieścić adres e-mail, po kliknięciu którego otworzy się program pocztowy to doskonałym rozwiązaniem dla będzie użycie ...