CSS pointer-events 穿透

重疊物件透明化，屬性

/* 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;

pointer-events: none;
運用在物件遮住按鈕時可穿透觸發hover

.box01 {
  width:50px;
  height:50px;
  background: rgba(0, 128, 255, 0.8);
  margin: 20px;
  z-index: 3;
}
.box02 {
  width:50px;
  height:50px;
  background: rgba(255, 102, 0, 0.8);
  margin: -55px 45px 20px;
  z-index: 2;
  pointer-events: none;
}
.box01:hover{
  background: rgba(134,0, 255, 0.8);
}