โดยใช้ pseudo-class selectors ใน CSS ได้แก่ :active, :hover, :link และ :visited เราสามารถจัดสไตล์สถานะต่างๆ ของลิงก์/แองคอร์ได้ เพื่อให้ทำงานถูกต้อง ลำดับของ selectors ควรเป็นดังนี้:
- :link
- :visited
- :hover
- :active
ไวยากรณ์ของคุณสมบัติ pseudo-class ใน CSS มีดังนี้:
a:(pseudo-selector) { /*declarations*/ }
ตัวอย่าง
ลองดูตัวอย่างการใช้งาน CSS Anchor Pseudo Classes:
<!DOCTYPE html> <html> <head> <style> div { display: flex; float: left; } a { margin: 20px; padding: 10px; border: 2px solid black; text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black; font-size: 1.1em; } a:link { text-decoration: none; } a:visited { color: blueviolet; } a:hover { color: orange; font-size: 150%; font-weight: bold; box-shadow: 0 0 5px 1px grey; } a:active { color: red; box-shadow: inset 0 0 15px red; } </style> </head> <body> <div> <h2>Your favourite sports?</h2> <a href="#">Football</a> <a href="">Cricket</a> </div> </body> </html>
ผลลัพธ์
ผลลัพธ์เริ่มต้น:
เมื่อวางเมาส์บนลิงก์แรก จะได้ผลลัพธ์ดังนี้:
ระหว่างการคลิกลิงก์แรก จะได้ผลลัพธ์ดังนี้:
ลองดูตัวอย่างเพิ่มเติมของ CSS Anchor Pseudo Class:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>CSS Anchor Pseudo Classes</title> </head> <style> div { color: #000; padding:20px; background-image: linear-gradient(135deg, grey 0%, white 100%); text-align: center; } .anchor { color: #FF8A00; } .anchor:last-child { color: #03A9F4; } .anchor:visited { color: #FEDC11; } .anchor:hover { color: #C303C3; } .anchor:active { color: #4CAF50; } </style> <body> <div> <h1>Search Engines</h1> <a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a> <a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a> </div> </body> </html>
ผลลัพธ์
