💡 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: 2025年3月1日

Hiệu ứng Hover

📌

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

Đừ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.

- :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ê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; }