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ü :
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.
UstaDerslik
