property-events เป็น property ของ CSS ควบคุมการตอบสนองขององค์ประกอบ HTML สำหรับเหตุการณ์ที่ใช้เมาส์ หรือการสัมผัสใด ๆ เมื่อการการตั้งค่าคุณลักษณะให้ปิดใช้งาน จะไม่มีการตอบสนองใดๆเมื่อใช้เมาส์ หรือการสัมผัสที่องค์ประกอบหรืออลิเมนต์นั้น
รูปแบบ Syntax ดังนี้
Code: Select all
property-events: auto | none
รองรับเบราว์เซอร์ขั้นต่ำ : Google Chrome 2.0, Internet Edge 11.0, Mozilla 3.6, Safari 4.0, Opera 9.6 ขึ้นไป
ตัวโค้ดด้านล่างนี้
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Disable Link using CSS</title>
<style type="text/css">
.not-active {
pointer-events: none;
cursor: default;
}
</style>
</head>
<body>
<a href="www.midphp.com" class="not-active">Click Here</a>
</body>
</html>
ถ้ากำหนด css style ตามนี้
Code: Select all
<style type="text/css">
.not-active {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
</style>
ผลลัพธ์ ผลลัพธ์จะเป็นเพียงการแสดงเหมือน text เฉยๆที่ไม่สามารถคลิกได้ แม้กระทั้งสีที่บงบอกว่าเป็นลิงค์ก็จะหายไปด้วยครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP