CSS教程
CSS进阶

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>
输出
 CSS指针事件属性

示例-使用自动值

此处,我们使用的是 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>
输出
 CSS指针事件属性
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4