CSS pointer-events属性用法及代码示例

此 CSS 属性指定元素在触发指针事件时是否显示某些操作。 pointer-events 由触摸、手写笔、鼠标点击等触发。

pointer-events 属性控制 HTML 元素如何响应诸如 CSS 活动/悬停状态、鼠标/触摸事件、JavaScript 单击/点击事件等事件，还控制光标是否可见。

此属性的 none 值用于停用单击目标并允许元素定位该元素下方的任何内容。

用法

pointer-events:none | auto |initial | inherit;

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

属性值

none:此值表示元素不会对指针事件做出反应。它避免了指定 HTML 元素上的所有状态、单击和光标选项。

auto:它是默认值。它表示元素必须对指针事件做出反应，例如单击和：悬停。

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

示例 - 使用 none 值

在此示例中，我们使用不针对 pointer-events 的 none 值。

<!DOCTYPE html>
<html>
<head>
<title>
pointer-events Property
</title>
<style>
body {
text-align:center;
}
p{
font-size:20px;
pointer-events:none;
}

</style>
</head>
<body>
<CENTER>
<h1> Welcome to the javaTpoint.com  </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href="https://www.javatpoint.com/"> javaTpoint.com </a>
</p>
</body>
</html>

输出

示例 - 使用自动值

在这里，我们使用 pointer-events 属性的自动值，它对 pointer-events 做出反应。

<!DOCTYPE html>
<html>
<head>
<title>
pointer-events Property
</title>
<style>
body {
text-align:center;
}
p{
font-size:20px;
pointer-events:auto;
}

</style>
</head>
<body>
<CENTER>
<h1> Welcome to the javaTpoint.com  </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href="https://www.javatpoint.com/"> javaTpoint.com </a>
</p>
</body>
</html>

输出

相关用法

注：本文由纯净天空筛选整理自 CSS pointer-events property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。