【前端点击穿透】pointer-events属性详解

什么是pointer-events？

在这里插入图片描述

pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。

This CSS property,when set to “none” allows elements to not receive hover/click events,instead the event will occur on anything behind it.

当这个属性设置为none时，元素则不接收hover、click事件，由他后面的元素进行接收。

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;  从其父元素继承此属性
pointer-events: initial;  将此属性设置为其默认值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

除去SVG的独有属性，其他是对浏览器来说生效的属性值。

做个demo

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点击穿透demotitle>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background: #04BBD4;
      margin: 20px;
      z-index: 3;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background: #090A0E;
      margin: -80px 40px 20px;
      z-index: 2;
      /* pointer-events: none; */
    }
    
    .box1:hover {
      background:#078404;
    }
    
    .box2:hover {
      background:#E98889;
    }
  style>
head>

<body>
    <div class="box1">div>
    <div class="box2">div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

未设置属性pointer-events

在这里插入图片描述

未设置属性的情况下，在光标移动到box1可以正常的触发hover，并且移动到box1和box2重叠的部分也是触发box1的hover。

设置box1属性pointer-events为none

在这里插入图片描述

设置属性的情况下，在光标移动到box1无法正常的触发hover，此时hover已经失效，移动到box1和box2重叠的部分则是触发box2的hover。

相关阅读:
如何创建一个Web项目
【Linux】网络配置详解
uniapp 手机真机测试云打包要是没申请可以使用云打包然后采用测试权限即可
数仓范式建模、ER实体建模和维度建模
OpenCV学习（五）——图像基本操作（访问图像像素值、图像属性、感兴趣区域ROI和图像边框）
金仓数据库全攻略：简化部署，优化管理的全流程指南
MATLAB算法实战应用案例精讲-【数模应用】K近邻算法(KNN)（附MATLAB、Python、R语言和Java代码）
Springboot集成ip2region离线IP地名映射
【LeetCode】899.有序队列
vue实现el-menu与el-tabs联动

原文地址：https://blog.csdn.net/qq_43277404/article/details/126007332