pointer-events 穿透属性本层盒子 ，鼠标作用于下面盒子

css样式 - 穿透属性 - pointer-events

css属性

例如： pointer-events: none;
悬浮最外层的盒子，鼠标穿透属性,穿透该盒子，作用于下层盒子。

作用：

例如： pointer-events: none;
悬浮最外层的盒子，鼠标穿透属性,**穿透该盒子**，作用于下层盒子。

代码展示

<template>
    <div class="timerSwiperBox">
        <div class="mask"></div>
        <div class="left_box"></div>
        <div class="right_box"></div>
    </div>
<template/>

<style lang="scss" scoped>
.timerSwiperBox {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  // 白色遮罩 - 最上层
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffffff 0%, transparent 50%, #ffffff 100%);
    z-index: 10;
    pointer-events: none; // 悬浮最外层的盒子，鼠标穿透属性,穿透该盒子，作用于下层盒子。
  }
  .left_box{
    width: 50%;
    height: 100%; 
    background: pink;
  }
  .right_box{
    width: 50%;
    height: 100%; 
    background: green;
  }
}
</style>

小结

使用的场景有很多

例如：

当鼠标想要作用于有遮罩层盒子的下面的一个个下盒子时，使用该属性即可解决