Pseudo-classes :hover และ :focus

:hover

เมื่อชี้เมาส์ (หรือเทียบเท่า) อยู่บนเอลิเมนต์ — ใช้กับลิงก์ ปุ่ม การ์ด

:focus

เมื่อเอลิเมนต์ได้รับโฟกัส (แท็บคีย์บอร์ด คลิกช่องกรอก) — สำคัญต่อ accessibility

a:hover {
  color: #0b3d91;
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
อย่าเอา outline ออกหมดโดยไม่มีตัวแทนที่มองเห็นได้ — ผู้ใช้คีย์บอร์ดต้องรู้ว่าโฟกัสอยู่ที่ไหน