pointer-events
Wyłącza reagowanie elementu na kliknięcia i najechanie kursorem.
- Wartość domyślna
auto- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.pointerEvents = "none"
Przykład
#.glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(167, 139, 250, 0.3), transparent 60%);
pointer-events: none;
}<div style="position: relative; padding: 20px; border-radius: 12px; border: 1px solid #333;">
<a href="#" style="color: #c4b5fd;">Link pod poświatą da się kliknąć</a>
<div style="position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(circle at top, rgba(167,139,250,.3), transparent 60%); pointer-events: none;"></div>
</div>Definicja i zastosowanie
#Właściwość pointer-events: none sprawia, że element staje się „przezroczysty” dla myszy i dotyku. Kliknięcia przechodzą przez niego do elementów leżących pod spodem, a style :hover przestają działać.
Najczęściej używa się jej do dekoracyjnych nakładek, gradientów i poświat, które leżą nad treścią, ale nie powinny blokować klikania w linki pod nimi.
Uwaga: pointer-events: none nie wyłącza obsługi klawiatury. Przycisk z tą właściwością nadal da się zaznaczyć klawiszem Tab i nacisnąć Enterem, więc do blokowania akcji używaj atrybutu disabled.
Składnia
#pointer-events: auto | none;Wartości
#Wartości w praktyce
#auto
.demo { pointer-events: auto; }none
.demo { pointer-events: none; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dekoracyjne warstwy nad treścią zawsze oznaczaj
pointer-events: none, inaczej zablokują klikanie. - Do wyłączania przycisków używaj
disabled, a nie samegopointer-events: none, bo klawiatura nadal zadziała.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.