可點選QR code
文章專區
網頁設計相關文章
穿透的Div－CSS的pointer-events屬性
當有兩個div重疊時，可以發現當滑鼠滑到重疊的區域時，會無法對下層的div進行點擊或hover的動作。
如下圖範例，藍色區塊(box01)設定了hover，只要滑入該div就會變色，但是當滑到重疊區塊時，壓在底下的box01設置的hover屬性會無法實現。
此時可以應用CSS的屬性「pointer-events」，它是針對滑鼠事件的屬性，預設值為auto，若設定值為none時，則可以穿越該元素。也就是說，原本滑鼠無法點擊的下層div，設定為pointer-event: none的話，可以讓鼠標直接穿越上層div，對下層div進行動作。
範例：
我們可以發現，原本壓在底下的box01，就算鼠標滑到重疊區域內，也可以觸發hover了。
