Sa write-up na ito, ilalarawan namin kung paano gamitin ang CSS pointer-events property.
Ano ang pointer-events Property?
CSS ' pointer-kaganapan Tinutukoy ng ” property ang gawi ng pointer/tap patungo sa HTML element at kung tutugon ang napiling elemento sa pamamagitan ng pagsasagawa ng mga pagkilos gaya ng pag-hover o pag-click.
Paano Gamitin ang Pointer-Events Property?
Sa CSS, maaaring gamitin ang pointer-events property upang paganahin o huwag paganahin ang mga pagkilos ng pointer sa ilang partikular na elemento ng HTML. Ang syntax ng pointer-events property ay ibinigay sa ibaba.
Syntax
pointer-kaganapan : wala | sasakyan ;
Sa nabanggit na syntax, ' sasakyan ” ay ang default na halaga ng property ng pointer-events, at pinapagana nito ang pagkilos ng pointer patungo sa isang elemento, at “ wala ” ay ganap na kabaligtaran sa sasakyan; hindi nito pinapagana ang pagkilos ng pointer sa mga elemento ng HTML.
Sumulong tayo at kumuha ng halimbawa para maunawaan ang property ng pointer-events.
Halimbawa 1
Sa aming HTML file, tumukoy ng anchor tag na may tekstong “ LinuxHint.io ” at ilagay ito sa loob ng body section.
HTML
< a href = “https://www.linuxhint.io/” > LinuxHint.io < / a >Ngayon, gagamitin natin ang ' pointer-kaganapan ' ari-arian at italaga ito ng halaga ' wala ”. Idi-disable nito ang pagkilos ng pointer sa elemento.
CSS
a {pointer-kaganapan : wala ;
}
I-save ang iyong HTML file gamit ang nabanggit na code at patakbuhin ito gamit ang iyong browser:
Kumuha tayo ng isa pang halimbawa upang masakop ang pointer-events property nang malalim.
Halimbawa 2
Itakda ang pointer-events property value sa “ sasakyan ” sa pagkakataong ito. Gagawin nitong tumugon ang elemento sa pag-hover o pag-click ng pointer. Gayunpaman, ang auto ay ang default na halaga ng pointer-events property.
CSS
a {pointer-kaganapan : sasakyan ;
}
Output
Sinakop namin ang iba't ibang gamit ng CSS pointer-events property.
Konklusyon
Upang kontrolin ang mga pagkilos ng pointer, maaari naming gamitin ang CSS ' pointer-kaganapan ” ari-arian. Ang ' sasakyan Ang ” value ay ang paunang natukoy na halaga ng property na ito; pinapagana nito ang mga aksyon sa mga elemento ng HTML. Kapag ginamit ang pointer-events property na may value na “ wala ”, hindi nito pinapagana ang mga aksyon patungo sa isang partikular na elemento. Ang write-up na ito ay nagpakita kung paano gamitin ang CSS pointer-events property.