Pointer Events

Utilities for controlling whether an element responds to pointer events.

Usage

Use pointerEvents="auto" to revert to the default browser behavior for pointer events (like :hover and click).

Use pointerEvents="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.

<x.div position="relative">
  <select>
    <option>Indiana</option>
    <option>Michigan</option>
    <option>Ohio</option>
  </select>
  <x.div pointerEvents="auto">
    <x.svg fill="currentcolor" h={4} w={4} viewBox="0 0 20 20">
      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
    </x.svg>
  </x.div>
</x.div>
 <x.div position="relative">
  <select>
    <option>Indiana</option>
    <option>Michigan</option>
    <option>Ohio</option>
  </select>
  <x.div pointerEvents="none">
    <x.svg fill="currentcolor" h={4} w={4} viewBox="0 0 20 20">
      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
    </x.svg>
  </x.div>
</x.div>

Responsive

To control pointer events at a specific breakpoint, use responsive object notation. For example, adding the property pointerEvents={{ md: "none" }} to an element would apply the pointerEvents="none" utility at medium screen sizes and above.

<x.div pointerEvents={{ md: 'none' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.