Pseudo-classes :hover และ :focus
:hover
เมื่อชี้เมาส์ (หรือเทียบเท่า) อยู่บนเอลิเมนต์ — ใช้กับลิงก์ ปุ่ม การ์ด
:focus
เมื่อเอลิเมนต์ได้รับโฟกัส (แท็บคีย์บอร์ด คลิกช่องกรอก) — สำคัญต่อ accessibility
a:hover {
color: #0b3d91;
text-decoration: underline;
}
a:focus {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
อย่าเอา
outline ออกหมดโดยไม่มีตัวแทนที่มองเห็นได้ — ผู้ใช้คีย์บอร์ดต้องรู้ว่าโฟกัสอยู่ที่ไหน