css 的pointer-events 属性

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

posted on 2018-02-11 12:28 huanying2015 阅读(850) 评论(0) 编辑收藏举报