1.css 有好多属性，可以让你感觉到不可思议，关键是可以解决一些难以实现的问题，今天遇到一个，就是 point-enevts属性

支持 pointer-events 属性 的浏览器版本

2. 1  point-events 属性的效果：

2.1.1 阻止点击事件的效果

2.1.2 阻止鼠标指针的显示

2.1.3 阻止css 里因为hover 和active 状态的改变而触发的事件

2.1.4 穿透上层元素，实现下层元素的选中效果

阻止点击事件的效果:

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <title>Document</title>
  8.      <style>
  9.          a {
  10.              text-decoration: none;
  11.          }
  12.          span {
  13.              cursor: pointer;
  14.          }
  15.      </style>
  16.  </head>
  17.  <body>
  18.      <div>
  19.          <li><a href="https://www.baidu.com/">百度</a></li>
  20.          <li><a href="https://www.tmall.com/">天猫，这是一个可以点击的链接</a></li>
  21.          <p><span>鼠标手型效果</span></p>
  22.      </div>
  23.  </body>
  24.  </html>

运行效果：1. 鼠标移到百度，天猫，鼠标手型上    都会有一个手型效果

改变css 样式：

  1.  <style>
  2.          a {
  3.              text-decoration: none;
  4.          }
  5.          a[href="https://www.tmall.com/"] {
  6.              pointer-events: none;
  7.          }
  8.          span {
  9.              cursor: pointer;
  10.          }
  11.      </style>

运行效果：a 标签的默认手型效果没有，点击默认跳转也没有了

2.2  使用point-events 属性，解除元素的hover效果：

改变css 样式：增加一个 hover 效果

  1.     <style>
  2.          a {
  3.              text-decoration: none;
  4.          }
  5.          a[href="https://www.tmall.com/"] {
  6.              pointer-events: none;
  7.          }
  8.          span {
  9.              cursor: pointer;
  10.          }
  11.          p {
  12.              background: #ccc;
  13.          }
  14.          p:hover {
  15.              background: #f00;
  16.          }
  17.      </style>

使用 pointer-events 改变 hover 效果

  1.   <style>
  2.          a {
  3.              text-decoration: none;
  4.          }
  5.          a[href="https://www.tmall.com/"] {
  6.              pointer-events: none;
  7.          }
  8.          span {
  9.              cursor: pointer;
  10.          }
  11.          p {
  12.              /* 这个是改变hover 的代码 */
  13.              pointer-events: none;
  14.          }
  15.          p {
  16.              background: #ccc;
  17.          }
  18.          p:hover {
  19.              background: #f00;
  20.          }
  21.      </style>

2.3 pointer-events属性改变点击事件的效果：（阻止点击事件）

初始状态：

  1.  <style>
  2.          a {
  3.              text-decoration: none;
  4.          }
  5.          a[href="https://www.tmall.com/"] {
  6.              pointer-events: none;
  7.          }
  8.          span {
  9.              cursor: pointer;
  10.          }
  11.          .active {
  12.              background: blue;
  13.          }
  14.      </style>
  15.      <script>
  16.          window.onload = function() {
  17.              $('p>span').on('click', function() {
  18.                  $('p').toggleClass("active");
  19.              });
  20.          }
  21.      </script>

运行效果：

加入 pointer-events ：none  属性改变效果

  1.      <style>
  2.          a {
  3.              text-decoration: none;
  4.          }
  5.          a[href="https://www.tmall.com/"] {
  6.              pointer-events: none;
  7.          }
  8.          p {
  9.              /* 阻止改变点击事件的效果，连同阻止子元素的点击事件的效果 */
  10.              pointer-events: none;
  11.          }
  12.          span {
  13.              cursor: pointer;
  14.          }
  15.          .active {
  16.              background: blue;
  17.          }
  18.      </style>

运行结果：

2.4 穿透上层元素，直接作用域下层元素：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <title>Document</title>
  8.      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  9.      <style>
  10.          * {
  11.              margin: 0;
  12.              padding: 0;
  13.          }
  14.          span {
  15.              color: red;
  16.          }
  17.          p {
  18.              top: 0;
  19.              left: 0;
  20.              position: absolute;
  21.              width: 100%;
  22.              height: 300px;
  23.              background: #000;
  24.              opacity: 0.5;
  25.              padding-top: 100px;
  26.          }
  27.      </style>
  28.  </head>
  29.  <body>
  30.      <div>
  31.          <li><a href="https://www.baidu.com/">百度</a></li>
  32.          <li><a href="https://www.tmall.com/">天猫，这是一个可以点击的链接</a></li>
  33.          <p><span>鼠标手型效果</span></p>
  34.      </div>
  35.  </body>
  36.  </html>

运行结果：鼠标移到a标签上方，没有效果，不会变成手型，点击也没有作用

加入pointer-events:none 透视 p 元素：

  1.  <style>
  2.          * {
  3.              margin: 0;
  4.              padding: 0;
  5.          }
  6.          span {
  7.              color: red;
  8.          }
  9.          p {
  10.              /* 加入pointer-events属性透视p 元素 */
  11.              pointer-events: none;
  12.          }
  13.          p {
  14.              top: 0;
  15.              left: 0;
  16.              position: absolute;
  17.              width: 100%;
  18.              height: 300px;
  19.              background: #000;
  20.              opacity: 0.5;
  21.              padding-top: 100px;
  22.          }
  23.      </style>

运行结果：直接透视p元素，可以点击li 下面的a 标签，同时可以正常运行跳转：

鼠标移动a标签上方，鼠标会变成手型，点击后会实现a连接的跳转

css 的pointer-events 属性的更多相关文章

  1. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  2. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

    6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...

  3. css的五种属性值----在路上（21）

    在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...

  4. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  5. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  6. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  7. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  8. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  9. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

  10. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

随机推荐

  1. maven之BOM及BOM和provided的一个小坑

    BOM(Bill of Materials)定义一整套相互兼容的jar包版本集合,使用时只需要依赖该BOM文件,即可放心的使用需要的依赖jar包,且无需再指定版本号.BOM的维护方负责版本升级,并保证 ...

  2. ubuntu 间简单相互通信

    1.  nc  命令 在一台机器上运行nc -l 来监听本机的2222号端口 另外一台机器就能连接到这台监听的机器上,假设上面那台机器的ip是192. nc 之后就能互相发送字符了 2. iptux通 ...

  3. Ubuntu14.04 下软件安装和卸载命令备记

    一.Ubuntu中软件安装方法 1.APT方式 ()普通安装:apt-get install softname1 softname2 …; ()修复安装:apt-get -f install soft ...

  4. Mysql 5.7 系列命令 timestamp类型的字段不能设默认值为“0000-00-00 00:00:00” 要设为`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新',

    一.show相关命令语句 1.查看表的索引 show index from tbl_name; 1 table:表名 non_unique:索引是非唯一的?.0否,唯一是索引的.1是,是非唯一索引.( ...

  5. CyclicBarrier循环屏障相关

    简介 CyclicBarrier 的字面意思是可循环使用(Cyclic)的屏障(Barrier).它要做的事情是,让一组线程到达一个屏障(也可以叫同步点)时被阻塞,直到最后一个线程到达屏障时,屏障才会 ...

  6. Mybatis 系列4-结合源码解析节点：typeAliases

    [Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...

  7. MySQL 设置密码有效时间

    mysql> alter user 'xuaiqi'@'%' PASSWORD EXPIRE INTERVAL 30 DAY;

  8. Http跨域

    一.传统 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jQuery的json ...

  9. 让WordPress支持google AMP

    1.关于AMP 在移动互联网的时代,尽管网站响应式设计可以满足多屏(pc.手机.ipad等)浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accelerated Mobile ...

  10. mybatis 设置新增数据后返回自增主键

    主要是注解@Options起作用,语句如下: @Insert({ "INSERT INTO application_open_up ( " + "app_open_hos ...