การปิดการใช้งานลิงค์โดยใช้ CSS

abdkode · Post by **abdkode** » 25/04/2019 6:22 pm

หากต้องการปิดใช้งานลิงก์โดยใช้ CSS เราสามารถใช้ property pointer-events ได้ซึ่งจะกำหนดว่าองค์ประกอบในหน้านั้นจะต้องตอบสนองได้หรือไม่ในขณะที่มีการคลิกที่องค์ประกอบหรืออลิเมนต์นั้นๆ

property-events เป็น property ของ CSS ควบคุมการตอบสนองขององค์ประกอบ HTML สำหรับเหตุการณ์ที่ใช้เมาส์ หรือการสัมผัสใด ๆ เมื่อการการตั้งค่าคุณลักษณะให้ปิดใช้งาน จะไม่มีการตอบสนองใดๆเมื่อใช้เมาส์ หรือการสัมผัสที่องค์ประกอบหรืออลิเมนต์นั้น

รูปแบบ Syntax ดังนี้

Code: Select all

property-events: auto | none

สามารถเลือกกำหนดค่าเป็น 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>

ผลลัพธ์ที่ได้

: 2019-04-25_18-02-43.jpg (3.56 KiB) Viewed 746 times

ซึ่งผลลัพธ์แสดงให้เห็นการใช้งานของคุณสมบัติดังกล่าว คือเหตุการณ์ที่แท็ก 'a' ซึ่งเป็นแท็กลิงค์ ถูกปิดใช้งานโดยไม่มีเคอร์เซอร์หรือจะไม่ปรากฎรูปมือ (ตัวชี้เคอร์เซอร์ที่ถูกปิดใช้งานบนแท็ก 'a') โดยปกติแล้วเมื่อ จุดนั้นเป็นลิงค์ เมาส์จะแสดงเป็นรูปมือชขี้เพื่อบงบอกถึงสามารถคลิกได้ แต่ในผลลัพธ์ยังคงรักษาลักษณะของเป็นลิงค์อยู่ หมายถึงมีสีนำเงินและขีดเส้นใต้
ถ้ากำหนด css style ตามนี้

Code: Select all

<style type="text/css"> 
.not-active { 
    pointer-events: none; 
    cursor: default; 
    text-decoration: none; 
    color: black; 
} 
</style>

ผลลัพธ์

: 2019-04-25_18-11-46.jpg (2.76 KiB) Viewed 746 times

ผลลัพธ์จะเป็นเพียงการแสดงเหมือน text เฉยๆที่ไม่สามารถคลิกได้ แม้กระทั้งสีที่บงบอกว่าเป็นลิงค์ก็จะหายไปด้วยครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

การปิดการใช้งานลิงค์โดยใช้ CSS

Who is online