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连接的跳转
