pointer-eventsCSS 屬性指定在什麼情況下 (如果有) 某個特定的圖形元素可以成為滑鼠事件的target。

/* 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;
pointer-events: unset;

如圖所示：在某個專案中我做了一個時間選擇器，對未選中的時間上方做一個漸變的蒙版遮罩層，而又不能影響時間滑動，實現方法如下

.picker__mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(top,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));
    background-image: linear-gradient(180deg,hsla(0
 
,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));
    background-repeat: no-repeat;
    background-position: top,bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}

主要就是用pointer-events: none;屬性，來穿透當前層，才能在蒙版在上方的基礎上，又不影響蒙版下的操作