2022-05-19 随笔 CSS pointer-events

pointer-events

说明与描述

pointer-events: 属性定义元素是否对指针事件做出反应。

属性值 描述
auto 默认值。元素对指针事件做出反应,比如 :hover 和 click。
none 元素不对指针事件做出反应。
initial 将此属性设置为其默认值。
inherit 从其父元素继承此属性。

示例

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>pointer-events 属性</h1>
    <p>请把鼠标指针移至下面的链接,查看是否对指针事件做出反应:</p>

    <h2>pointer-events: none;</h2>
    <div style="pointer-events: none;">
      访问 <a href="https://www.jianshu.com/">简书</a>
    </div>
    <!-- 无法点击访问,鼠标移入无效果 -->

    <h2>pointer-events: auto; (默认)</h2>
    <div style="pointer-events: auto;">
      访问 <a href="https://www.jianshu.com/">简书</a>
    </div>
    <!-- 可以点击访问,鼠标移入会变成手 -->
  </body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容