css如何設(shè)置不可點擊的實現(xiàn)方法
發(fā)布時間:2022-05-06 16:51:39 作者: Terence Wang
我要評論

本文主要介紹了css如何設(shè)置不可點擊的實現(xiàn)方法,可以通過設(shè)置元素的pointer-events屬性設(shè)置為none,來實現(xiàn)元素不可點擊,具有一定的參考價值,感興趣的可以了解一下
可以通過設(shè)置元素的pointer-events屬性設(shè)置為none,來實現(xiàn)元素不可點擊。
此方法是通過設(shè)置元素的鼠標(biāo)事件失效來實現(xiàn)元素不可點擊。
pointer-events: none;
CSS pointer-events 屬性定義元素是否對指針事件做出反應(yīng)。
屬性值 | 描述 |
---|---|
auto | 默認(rèn)值。元素對指針事件做出反應(yīng),比如 :hover 和 click。 |
none | 元素不對指針事件做出反應(yīng)。 |
initial | 將此屬性設(shè)置為其默認(rèn)值。參閱 initial。 |
inherit | 從其父元素繼承此屬性。參閱 inherit。 |
示例:
<!DOCTYPE html> <html> <head> <style> div.ex1 { pointer-events: none; } div.ex2 { pointer-events: auto; } </style> </head> <body> <h1>pointer-events 屬性</h1> <p>請把鼠標(biāo)指針移至下面的鏈接,查看是否對指針事件做出反應(yīng):</p> <h2>pointer-events: none:</h2> <div class="ex1">訪問 <a href="https://www.w3school.com.cn/html/">HTML 教程</a></div> <h2>pointer-events: auto(默認(rèn))</h2> <div class="ex2">訪問 <a href="https://www.w3school.com.cn/css/">CSS 教程</a></div> </body> </html>
注意:
- pointer-events 的值為 none 時,如果元素上絕對定位,那在它下一層的元素可以被選中。
- pointer-events: none; 只是用來禁用鼠標(biāo)的事件,通過其他方式綁定的事件還是會觸發(fā)的,比如鍵盤事件等。
- 如果將一個元素的子元素 pointer-events 設(shè)置成其他值(比如:auto),那么當(dāng)點擊子元素時,還是會通過事件冒泡的形式出發(fā)父元素的事件。
到此這篇關(guān)于css如何設(shè)置不可點擊的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)css設(shè)置不可點擊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
css偽類 右下角點擊出現(xiàn) 對號角標(biāo)表示選中的示例代碼
這篇文章主要介紹了css偽類 右下角點擊出現(xiàn) 對號角標(biāo)表示選中,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-22用CSS防Lightbox實現(xiàn)點擊小圖無刷新顯示大圖代碼
這篇文章主要介紹了用CSS防Lightbox實現(xiàn)點擊小圖無刷新顯示大圖代碼,需代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,要的朋友可以參考下2019-09-09- 這篇文章主要介紹了實現(xiàn)點擊按鈕后CSS加載效果的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)2019-05-09
- 這篇文章主要為大家詳細(xì)介紹了CSS鼠標(biāo)點擊改變圖片透明度,為大家提供改變圖片css透明度屬性的簡單方法,感興趣的小伙伴們可以參考一下2016-03-08
用CSS中的map標(biāo)簽制作單圖多區(qū)域點擊的示例
這篇文章主要介紹了CSS中的map標(biāo)簽制作單圖多區(qū)域點擊的示例,可在同一張圖片上實現(xiàn)多個點擊事件的熱點,需要的朋友可以參考下2015-07-20- a標(biāo)簽點擊后會有虛框,這是一個很影響視覺的問題,下面有個不錯的解決方法,大家可以參考下2014-02-26
- input和textarea點擊選中框很影響美觀,有什么方法可以將它去除掉呢?下面有個不錯的方法,需要的朋友可以參考下2013-11-25
- 滾動翻頁這樣的效果想必各位在瀏覽網(wǎng)頁的時候都有見過吧,本文將使用純css實現(xiàn)這個效果,不含有任何的輔助代碼,感興趣的朋友可以參考下哈,希望可以幫助到你2013-03-22