CSS pointer-events 属性

此 CSS 属性指定了当鼠标事件在其上触发时，元素是否会产生任何动作。鼠标事件由触摸、手写笔、鼠标点击等触发。

pointer-events 属性控制 HTML 元素如何响应 CSS 的 active/hover 状态、鼠标/触摸事件、JavaScript 的 click/tap 事件等，并控制光标是否可见。

该属性的 none 值用于禁用点击目标，并允许元素触及其下方的任何元素。

语法

虽然此属性有十一个可能的值，但上述语法中给出的值是 HTML 元素的有效值，其他值保留用于 SVG。

属性值

none: 此值表示元素不响应鼠标事件。它会忽略指定 HTML 元素上的所有状态、点击和光标选项。

auto: 这是默认值。它表示元素必须响应鼠标事件，例如 click 和 :hover。

让我们通过一些示例来理解这些值。

示例 - 使用 none 值

在此示例中，我们使用 none 值，它不响应 pointer-events。

输出

示例 - 使用 auto 值

在这里，我们使用 pointer-events 属性的 auto 值，它会响应 pointer-events。

输出