CSS pointer-events

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 bianchenghao6.com </h1>
        <h2> pointer-events:auto; </h2>
        <p>
            <a href="https://bianchenghao6.com/"> bianchenghao6.com </a>
        </p>
</body>
</html>
输出

CSS pointer-events_https://bianchenghao6.com_【CSS 教程】_第1张

示例-使用自动值

此处,我们使用的是
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>
输出

CSS pointer-events_https://bianchenghao6.com_【CSS 教程】_第2张