如何讓被遮擋層可以進行事件點擊？（純CSS方法）

張憲坤發(fā)布于2019-08-30 15:54 / 1404人閱讀

摘要：歡迎關(guān)注前端小謳的，閱讀更多原創(chuàng)技術(shù)文章非常簡單外層被遮擋的層內(nèi)層要發(fā)生事件的層屬性本身有很多取值，但只有和可以用在瀏覽器上，其他都只能應(yīng)用在上取值元素永遠不會成為鼠標(biāo)事件的取值與屬性未指定時的表現(xiàn)效果相同即將元素恢復(fù)成為鼠標(biāo)事件的

歡迎關(guān)注前端小謳的github，閱讀更多原創(chuàng)技術(shù)文章

非常簡單：

外層（被遮擋的層）{
    pointer-events: none;
}
 
內(nèi)層（要發(fā)生事件的層）{
    pointer-events: auto;
}

pointer-events屬性本身有很多取值，但只有none和auto可以用在瀏覽器上，其他都只能應(yīng)用在SVG上

取值none：元素永遠不會成為鼠標(biāo)事件的target

取值auto：與pointer-events屬性未指定時的表現(xiàn)效果相同（即將元素恢復(fù)成為鼠標(biāo)事件的target）

這里不要忘了給內(nèi)層添加auto屬性，否則被外層包裹的所有內(nèi)層無法成為鼠標(biāo)事件的target了

GPU云服務(wù)器云服務(wù)器純CSS 點擊事件鼠標(biāo)點擊事件綁定點擊事件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117057.html

相關(guān)文章

【小案例】基于色鍵技術(shù)的純客戶端實時蒙版彈幕

摘要：組件提供了一系列的操作接口以方便用戶對彈幕的相關(guān)特性進行定制。對于這種類型的圖像，我們可以使用色鍵的方式進行摳圖生成蒙版。其中，用于更新蒙版的接口為。導(dǎo)讀：本文內(nèi)容是筆者最近實現(xiàn)的 web 端彈幕組件—— Barrage UI 的一個延伸。在閱讀本文的實例和相關(guān)代碼之前，不妨先瀏覽項目文檔，對組件的使用方式和相關(guān)接口進行了解。各位童鞋如果經(jīng)常上 B 站（bilibili.com） ...

muzhuyu 2019-08-23 14:50 評論0 收藏0
更豐富的網(wǎng)頁多圖層效果：css混合模式

摘要：與繪制順序密切相關(guān)的概念是層疊上下文。把正常也算上的話，現(xiàn)在網(wǎng)頁里可用的混合模式一共種。因此，正片疊底是一個變暗的混合模式。需要注意的是，其中這個位于最下層的背景該元素?zé)o背景色，它的混合模式其實是沒有作用的，可以認為就是默認值。圖層在Photoshop等圖像編輯軟件里，圖層是最基礎(chǔ)的概念之一。我們平時看一張照片，就可能想到遠處的背景、近處的人物這樣的描述，這其實就是在劃分圖層。多個...

Ku_Andrew 2019-08-30 12:44 評論0 收藏0
CSS中用 opacity、visibility、display 屬性將元素隱藏的對比分析

摘要：說明用來設(shè)置透明度定義建立布局時元素生成的顯示框類型用來設(shè)置元素是否可見。總的來說，使用和屬性，自身的事件不會觸發(fā)，而使用屬性，自身綁定的事件還是會觸發(fā)的。說明 opacity 用來設(shè)置透明度 display 定義建立布局時元素生成的顯示框類型 visibility 用來設(shè)置元素是否可見。 opacity、visibility、display 這三個屬性分別取值 0...

rollback 2019-08-29 15:34 評論0 收藏0
CSS中用 opacity、visibility、display 屬性將元素隱藏的對比分析

摘要：說明用來設(shè)置透明度定義建立布局時元素生成的顯示框類型用來設(shè)置元素是否可見。總的來說，使用和屬性，自身的事件不會觸發(fā)，而使用屬性，自身綁定的事件還是會觸發(fā)的。說明 opacity 用來設(shè)置透明度 display 定義建立布局時元素生成的顯示框類型 visibility 用來設(shè)置元素是否可見。 opacity、visibility、display 這三個屬性分別取值 0...

yanest 2019-08-02 10:35 評論0 收藏0