CSS Ders-23 Pointer Events Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-23 Pointer Events Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1826)
RAPOR ET
CSS derslerimize devam ediyoruz. Bu derste pointer-events kodunu anlatacağım.Öncelikle işlevinden bahsedelim.Normal koşullarda bir objeyi başka bir objenin üstüne koyduğumuzda altakine mouse olayları işlemiyordu.Çünkü önündeki obje engel oluyor.Pointer events ise objeyi hem önünde gösterip hemde arkasındaki objenin mouse olaylarına izin veriyor.Örneğe geçelim daha iyi anlarsınız.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
div{width:200px;margin:auto;position:relative;}
button{width:200px;height:60px;}
span{width:150px;height:60px;position:absolute;left:25px;top:0;background:red;z-index:10;opacity:.3;pointer-events:none;}

</style>
</head>
<body>

<div>
<button>Tıkla</button>
<span class="kapla"></span>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/fdg47r1fg8.png
Gördüğünüz gibi butonun önünde opacity si düşmüş bir kutu var ama kutunun üstüne mouse ile geldiğimizde arkadaki buton hala çalışıyor.Bunun sebebi kırmıza spana
pointer-events:none;

vermemiz.Normal hale getirmek için
pointer-events:auto;

kullanabilirsiniz.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol