Trạng thái liên kết trong CSS

Tôi nghĩ rằng bạn, khi ghé thăm các trang web khác nhau trên internet, đã để ý thấy rằng các liên kết thường phản ứng khi di chuột lên trên chúng. Hiệu ứng như vậy có thể đạt được bằng cách thiết lập hành vi cho liên kết trong các trạng thái khác nhau.

Ví dụ, như thế này - a:hover - chúng ta sẽ bắt được trạng thái khi con trỏ chuột di chuột vào liên kết. Vào lúc này chúng ta có thể, ví dụ, thay đổi màu sắc của liên kết hoặc bỏ/thêm gạch chân cho nó. Cấu trúc :hover được gọi là pseudo-class (lớp giả). Các lớp giả cho phép bắt các trạng thái khác nhau của phần tử.

Ngoài :hover còn có các lớp giả :link, dùng để bắt liên kết chưa được ghé thăm, và :visited, dùng để bắt liên kết đã được ghé thăm. Trên một số trang web, người ta sử dụng chúng để hiển thị cho người dùng biết họ đã ghé thăm đâu, và chưa ghé thăm đâu. Còn có lớp giả :active, dùng để bắt trạng thái tiếp theo: phần tử được nhấn chuột vào, nhưng chưa thả ra.

Trong ví dụ tiếp theo, đối với liên kết ở trạng thái :hover, gạch chân sẽ bị bỏ đi, ở trạng thái :link sẽ được thiết lập màu đỏ, ở trạng thái :visited - màu xanh lá, ở :active - màu xanh da trời. Kết quả sẽ là, ban đầu liên kết sẽ có màu đỏ, sau khi nhấn vào nó - màu xanh lá, nếu nhấn chuột vào nó và giữ nguyên - màu xanh da trời, còn nếu di chuột vào - sẽ trở thành không gạch chân:

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">link</a>