让知识连接你我
投稿赚钱
当前位置: 首页 > 前端开发 > 如何使用CSS禁用链接?详细介绍pointer-events特性
  • 101
  • 微信分享

    扫一扫,在手机上查看

如何使用CSS禁用链接?详细介绍pointer-events特性

2019.09.11 10:00 223 浏览 举报

  要想应用CSS禁止超链接,能够应用pointer-events特性,该特性设定在单击因素时网页页面中的因素能否务必反映。接下来本文章内容就来给大家详细介绍一下子pointer-events特性,期望对大家有一定的协助。

5d147d5b5c1d1692.jpg

  CSS pointer-events特性

  CSS的pointer-events特性调节html语言因素对一切鼠标/触摸事件处理的反映。当设定disable特性时,一切因素都不容易对调整的一切实际操作作出反映。

  语法:

  property-events: auto | none

  最少浏览器适用:Google Chrome 2.0、Internet Edge 11.0、Mozilla 3.6、Safari 4.0、Opera 9.6及更高版本

  pointer-events特性举例

  举例1:

  接下来的代码显视了pointer-events特性的应用,当中禁止了“a”标注,都没有光标(禁止了“a”标注上的光标指针)。

  <!DOCTYPE html>
      <html>
          <head>
          <meta charset="utf-8">
          <title>Disable Link using CSS</title>
              <style type="text/css">
              .not-active {
                  pointer-events: none;
                  cursor: default;
                  }
              </style>
          </head>
  <body>
      <a href="https://www.html.cn/" class="not-active">Click Here</a>
  </body>
  </html>

  效果图:

1561623976920144 (2).png

  大家能够特别注意到,尽管它看上去像一个超链接,在我们在它里面指针或点击它时毫无反映..

  举例2:

  <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Disable Link using CSS</title>
      <style type="text/css">
          .not-active {
              pointer-events: none;
              cursor: default;
              text-decoration: none;
              color: black;
          }
      </style>
      </head>
      <body>
          <a href="https://www.html.cn/" class="not-active">Click Here</a>
      </body>
      </html>

  效果图:

1561624015229225 (2).png

  这里能够看得出它以至于看上去不像一个超链接。


本文首次发布于开创者素材 ,转载请注明出处,谢谢合作!

相关文章推荐