交互性
用于控制元素是否响应指针事件的实用程序。
使用 pointer-events-auto
将指针事件恢复为默认的浏览器行为(如 :hover
和 click
)。
使用 pointer-events-none
使元素忽略指针事件。指针事件仍将在子元素上触发,并传递给目标元素“下方”的元素。
尝试点击搜索图标以查看预期行为
pointer-events-auto
pointer-events-none
<div class="relative ...">
<div class="absolute pointer-events-auto ...">
<svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input type="text" placeholder="Search" class="...">
</div>
<div class="relative ...">
<div class="absolute pointer-events-none ...">
<svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input type="text" placeholder="Search" class="...">
</div>
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 focus:pointer-events-auto
仅在焦点上应用 pointer-events-auto
实用程序。
<div class="pointer-events-none focus:pointer-events-auto">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其它状态 文档。
您还可以使用变体修饰符来针对媒体查询,例如响应式断点、暗模式、 prefers-reduced-motion 等等。例如,使用 md:pointer-events-auto
仅在中等屏幕尺寸及以上应用 pointer-events-auto
实用程序。
<div class="pointer-events-none md:pointer-events-auto">
<!-- ... -->
</div>