美文网首页技术随笔
2022-05-19 随笔 CSS pointer-events

2022-05-19 随笔 CSS pointer-events

作者: narcissus灬 | 来源:发表于2022-05-19 10:21 被阅读0次

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>

相关文章

网友评论

    本文标题:2022-05-19 随笔 CSS pointer-events

    本文链接:https://www.haomeiwen.com/subject/ehftprtx.html