zoukankan      html  css  js  c++  java
  • pointer-events: none 的两个应用场景

    pointer-events: none 真是个神奇的属性。
    
    该属性有什么用?借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说:
    
    pointer-events: none 顾名思义,就是鼠标事件拜拜的意思。元素应用了该 CSS 属性,链接啊,点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素,则我们在页面上看到的这个按钮,只是一个虚幻的影子而已,您可以理解为海市蜃楼,幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。
    
    大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性,可以实现事件的完全禁用。如果其他标签需要类似的禁用效果,可以试试 pointer-events: none
    
    举个简单的例子:
    
    复制代码
    <a href="http://sf.gg" style="pointer-events: none">click me</a>
    这个链接,你是点不了的,并且 hover 也没有效果。(值得一提的是,仅仅是鼠标事件失效,用 tab 键还是可以选中该链接的,然后 enter 打开,这个时候可以去掉 a 标签的 href 属性,就不能让 tab 键选中了)
    

      

  • 相关阅读:
    正则表达式
    什么是面向对象
    关于jdk,jre,jvm和eclipse的一些总结
    分析ajax爬取今日头条街拍美图
    pycharm误删恢复方法及python扩展包下载地址
    django 之 视图层、模板层
    django
    django框架基础二
    jdango框架基础一
    安装软件,提高速度,可以使用清华源
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/12335294.html
Copyright © 2011-2022 走看看