Pointer Events
@include('_partials.class-table', [
'rows' => [
[
'.pointer-events-none',
'pointer-events: none;',
"Make element not react to pointer events, like :hover or click.",
],
[
'.pointer-events-auto',
'pointer-events: auto;',
"Make element react to pointer events, like :hover or click.",
],
]
])
Usage
Use .pointer-events-auto to revert to the default browser behavior for pointer events (like :hover and click).
Use .pointer-events-none to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.
@component('_partials.code-sample', [])
Try clicking the caret icon to open the dropdown
.pointer-events-auto (event captured)
.pointer-events-none (event passes through)
Customizing
@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'pointer event', 'property' => 'pointerEvents', ], 'variants' => [ 'responsive', ], ])
