SVG
pointer-events

Invoering

geen

de meest voorkomende use case is om pointer-events op none te stellen om te voorkomen dat bepaalde vormen of al uw tekeningen muisgebeurtenissen vastleggen en de vormen eronder toestaan de events te ontvangen.

Als u over het gebied zweeft waar de rode cirkel de blauwe cirkel overlapt, ontvangt de blauwe cirkel nog steeds de muisgebeurtenissen, aangezien aanwijzergebeurtenissen zijn ingesteld op none

<svg viewBox="0 0 150 100">
    <style>
        .target:hover{fill:green}
    </style>
    <circle class="target" cx="50" cy="50" r="50" fill="blue"/>
    <circle cx="100" cy="50" r="50" fill="red" pointer-events="none"/>
</svg> 

vullen

Door pointer-events="fill" kunt u muisgebeurtenissen in een vorm ontvangen, zelfs als de vulling is ingesteld op none

<svg viewBox="0 0 100 100">
    <style>
        circle:hover{fill:green}
    </style>
    <circle class="target" cx="50" cy="50" r="50" fill="none"/>
</svg>