CSS pointer-events
CSS pointer-events
此CSS属性指定当指针事件被触发时元素是否显示某些动作。指针事件由触摸，手写笔，鼠标单击等触发。
pointer-events属性控制HTML元素如何响应事件，例如 CSS活动/悬停状态，鼠标/触摸事件，JavaScript单击/点击事件，并且还控制光标是否可见。
此属性的
none 值用于停用点击目标，并允许这些元素定位该元素下方的任何内容。
none 值用于停用点击目标，并允许这些元素定位该元素下方的任何内容。
语法
pointer-events: none | auto |initial | inherit;
尽管此属性包括11个可能的值，但是上述语法中给出的值是 HTML的有效值元素，其他值保留给SVG使用。
属性值
none：该值表示元素不对指针事件做出反应。它避免了指定HTML元素上的所有状态，单击和光标选项。
auto：是默认值。它表示元素必须对诸如
click 和
:hover 之类的指针事件做出反应。
click 和
:hover 之类的指针事件做出反应。
让我们通过一些示例来理解这些值。
示例-不使用值
在此示例中，我们使用不针对指针事件的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 bianchenghao6.com </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href="https://bianchenghao6.com/"> bianchenghao6.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 bianchenghao6.com </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href="https://bianchenghao6.com/"> bianchenghao6.com </a>
</p>
</body>
</html>
输出
