您好,登錄后才能下訂單哦!
這篇文章主要介紹了css中pointer-events屬性怎么用,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
首先我們來看看pointer-events屬性的作用:
當(dāng)在HTML元素上使用pointer-events屬性時(shí),它可以指定元素是否能響應(yīng)鼠標(biāo)(或觸摸)事件。它可以用于防止單擊、狀態(tài)(CSS活動(dòng)、焦點(diǎn)和懸停狀態(tài))和光標(biāo)操作(例如,在鏈接上顯示指針光標(biāo))。
你可以讓元素響應(yīng)指針事件(auto),或者阻止它執(zhí)行此操作(none)。如果阻止它響應(yīng)指針事件,則其下面的元素將成為這些事件的目標(biāo)。如果單擊該元素,則其下方的元素將接收該單擊(click)事件。同樣也適用于懸停和其他光標(biāo)操作。例如,你可以選擇位于元素下方的元素中的文本設(shè)置為pointer-events: none(請(qǐng)參考下面的示例)。
pointer-events屬性在不同的場(chǎng)景中非常有用。此屬性的一個(gè)優(yōu)點(diǎn)是允許你使用pointer-events: none來創(chuàng)建60fps的滾動(dòng)。
我們可以在子元素上使用(覆蓋上)禁用元素的指針事件:如果元素的子元素上具有pointer-events:auto(即啟用),則即使其父元素沒有,它也將能夠處理并響應(yīng)單擊(click)事件。
下面我們來看看pointer-events屬性的示例:
在示例中,覆蓋元素是定位在整個(gè)頁面上的,疊加層設(shè)置了pointer-events: none,因此你可以選擇文本并單擊其下方的錨標(biāo)記。還要注意當(dāng)你將鼠標(biāo)懸停在鏈接上時(shí)光標(biāo)如何變成指針(手掌形狀),因?yàn)閼彝顟B(tài)會(huì)觸發(fā)它們。
HTML代碼:
<div class="overlay"><h2>覆蓋層</h2></div> <div class="container"> <h2>Pointer-Events 演示</h2> <p> Pointer-Events 演示,<a href="#">指針 演示</a>, Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,<a href="#">指針 演示</a>。 Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示。 </p> <p> Pointer-Events 演示Pointer-Events 演示Pointer-Events 演示Pointer-Events 演示Pointer-Events 演示Pointer-Events 演示<a href="#">指針演示,</a>Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示,Pointer-Events 演示! </p> </div>
css代碼:
.container { margin: 40px auto; width: 510px; background-color: white; padding: 2em; font-size: 20px; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); z-index: 1; color: white; text-align: center; pointer-events: none; } .overlay h2 { font-size: 80px; line-height: 4; }
看看演示效果:
你也嘗試更改none值以auto查看它如何使疊加層阻止指針事件在鏈接及其下方的任何內(nèi)容上觸發(fā)。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享css中pointer-events屬性怎么用內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。