Tailwind CSS Pointer Events is a set of predefined classes that control how elements handle mouse events, allowing you to easily enable or disable pointer interactions in your design.Tailwind CSS Pointer Events
pointer-events: none带来两个特点: 使直接作用在元素上的鼠标操作失效「穿透」到下层 灵活运用这两个特点,能轻巧地实现一些效果 穿透遮挡物 例如Tailwind CSS 给的这个例子,希望点击搜索图标时能聚焦到输入框。只要对图标元素设置pointer-events: none做穿透即可。 <svg class="absolute text-slate-400 h-5 w-5"...
div.ex1{pointer-events:none;}div.ex2{pointer-events:auto;} 尝试一下 » 定义和使用 pointer-events 属性用于设置元素是否对鼠标事件做出反应。 默认值:none 默认值:auto 继承:无 动画:no。阅读animatable 版本:CSS3 JavaScript 语法:object.style.all="initial"尝试一下 ...
pointer-events用法 用c3做动效的时候遇到层级问题很不好处理,导致前面的元素影响后面元素的鼠标事件。被这个问题困扰好久突然想到有没有什么属性能让元素被虚化,点击事件可以渗透。发现了这个神奇的用法。 svg之外的元素支持两个值:none和auto. auto是默认值就不解释了。 none:MDN上的解释是这样的,元素永远不会成为...
Use thepointer-events-autoutility to revert to the default browser behavior for pointer events: <!-- ... --> Copyright © 2025 Tailwind Labs Inc.·Trademark Policy