💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 31 tháng 5 năm 2026
Hiệu ứng Hover | Hướng dẫn và bài tập
📌
Kết luận
Dùng :hover để thay đổi phong cách khi di chuột vào phần tử
📝 Mã thực tế tại đây
a:hover { color: red; }Các Pseudo-class chính
| Pseudo-class | Thời điểm kích hoạt |
|---|---|
:hover | Khi di chuột vào |
:focus | Khi phần tử được chọn (tập trung) |
:active | Khi đang nhấp chuột |
Lưu ý về khả năng truy cập
Đừng chỉ định dạng cho:hover, hãy áp dụng phong cách tương tự cho :focus để những người sử dụng bàn phím cũng có trải nghiệm tốt.
Tổng kết
-:hover tạo ra sự tương tác về mặt thị giác
- Tốt nhất nên chỉ định cả :focus cùng lúc
Hãy thử trong phần bài tập
Hãy thêm phong cách đổi màu chữ sang đỏ khi hover vào liên kết nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Khi di chuột vào thẻ a, hãy làm cho chữ chuyển sang màu đỏ.
Gợi ý khi gặp khó khăn
a:hover { color: red; }