Pseudo-class :hover
เพื่อเปลี่ยนสีของลิงก์เมื่อนำเมาส์ไปชี้ ให้ใช้ pseudo-class :hover
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อเปลี่ยนสีลิงก์:
<html>
<head>
<style>
a:hover {
color: #FFCC00;
}
</style>
</head>
<body>
<a href="">My Link</a>
</body>
</html>
Pseudo-classes สำหรับลิงก์:
- :link - ลิงก์ที่ยังไม่ได้เยี่ยมชม
- :visited - ลิงก์ที่เยี่ยมชมแล้ว
- :hover - เมื่อเมาส์ชี้อยู่
- :active - เมื่อกำลังคลิกอยู่
- :focus - เมื่อได้รับโฟกัส (คีย์บอร์ด)
ลำดับที่แนะนำ (LVHA): :link → :visited → :hover → :active
