CSS pointer-events

V některých situacích, například při rolování po stránce, může být zbytečné, aby se u všech elementů, co mají efekt po najetí myši, na ten zlomek sekundy, kdy kursor bude nad elementem, :hover vyvolával.

CSS vlastnost pointer-events může toto chování zablokovat. Kromě CSS události umí blokovat i události v JavaScriptu (onclick, onmouseover apod.). Bohaté využití má u SVG, kde funguje od IE 9. U HTML obsahu je podpora mimo starou Operu 12 až od IE 11.

Odstavec má barevný :hover a při onclicku zobrazí JS hlášku.

Stejný odstavec, ale nastavení pointer-events: none by tuto parádu mělo zrušit.

Poznámka: správně řečeno nejde o blokování událostí myši, ale obecně ukazatele.

Hodnoty

auto

Výchozí hodnota. Jako by se nic nenastavilo.

none
Události vyvolané ukazatelem se neprojeví.
SVG
Pro SVG existuje dalších 7 hodnot.

Využití

S pointer-events: none se dá třeba zablokovat odkaz, tlačítko nebo zrychlit rolování stránky (i když u toho je otázka, zda by takové chování neměl zajišťovat přímo prohlížeč).

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Komentáře