Bu yazıda, CSS pointer-events özelliğinin nasıl kullanılacağını detaylandıracağız.
pointer-events Özelliği nedir?
CSS' işaretçi olayları ” özelliği, HTML öğesine yönelik işaretçi/dokunma davranışını ve seçilen öğenin üzerine gelme veya tıklama gibi eylemler gerçekleştirerek yanıt verip vermeyeceğini belirtir.
İşaretçi olayları Özelliği Nasıl Kullanılır?
CSS'de, bazı belirli HTML öğelerinde işaretçi eylemlerini etkinleştirmek veya devre dışı bırakmak için işaretçi olayları özelliği kullanılabilir. Pointer-events özelliğinin sözdizimi aşağıda verilmiştir.
Sözdizimi
işaretçi olayları : Yok | Oto ;
Söz konusu söz diziminde, “ Oto ”, işaretçi olayları özelliğinin varsayılan değeridir ve bir öğeye yönelik işaretçi eylemini etkinleştirir ve “ Yok ” otomobilin tam tersidir; HTML öğelerinde işaretçi eylemini devre dışı bırakır.
Devam edelim ve pointer-events özelliğini anlamak için bir örnek alalım.
örnek 1
HTML dosyamızda, ' metnini içeren bir bağlantı etiketi belirtin. LinuxHint.io ” ve gövde bölümünün içine yerleştirin.
HTML
< a href = “https://www.linuxhint.io/” > LinuxHint.io < / a >Şimdi, ' işaretçi olayları 'özellik ve ona değer atayın' Yok ”. Bu, öğe üzerindeki işaretçi eylemini devre dışı bırakacaktır.
CSS
a {işaretçi olayları : Yok ;
}
HTML dosyanızı belirtilen kodla kaydedin ve tarayıcınızı kullanarak çalıştırın:
Pointer-events özelliğini derinlemesine ele almak için başka bir örnek alalım.
Örnek 2
İşaretçi olayları özellik değerini ' olarak ayarlayın. Oto ' bu zaman. Öğenin imleç üzerine gelmesi veya tıklaması üzerine yanıt vermesini sağlar. Bununla birlikte auto, pointer-events özelliğinin varsayılan değeridir.
CSS
a {işaretçi olayları : Oto ;
}
Çıktı
CSS pointer-events özelliğinin farklı kullanımlarını ele aldık.
Çözüm
İşaretçi eylemlerini kontrol etmek için CSS'yi kullanabiliriz “ işaretçi olayları ' Emlak. “ Oto ” değer, bu özelliğin önceden tanımlanmış değeridir; HTML öğeleri üzerindeki eylemleri etkinleştirir. pointer-events özelliği ' değeriyle birlikte kullanıldığında Yok ”, belirli bir öğeye yönelik eylemleri devre dışı bırakır. Bu yazı, CSS pointer-events özelliğinin nasıl kullanılacağını göstermiştir.