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