: hover - Thủ thuật CSS | CSS Almanac 2025

Lớp :hovergiả trong CSS chọn các phần tử khi con trỏ chuột hiện qua chúng. Nó thường được kết hợp với các phần tử link ( ).

a:hover ( color: green; text-decoration: underline overline; )

Vì vậy, khi một liên kết như thế này được "di chuột" (giống như con trỏ trên thiết bị có chuột):

Go to Google

Nó sẽ chuyển sang màu xanh lục và có một đường kẻ bên dưới và bên trên nó.

Trong IE 6 trở xuống, :hover được sử dụng để chỉ hoạt động trên các liên kết, nhưng trong các trình duyệt mới hơn, nó hoạt động trên bất kỳ phần tử nào. Điều này có thể đặc biệt hữu ích cho những thứ như menu thả xuống trong đó bạn có thể đợi :hover mục danh sách mẹ và sau đó hiển thị cấp độ tiếp theo của menu lồng nhau. Tuy nhiên, hãy cẩn thận, hiệu ứng di chuột nên được kết hợp với một số loại hành động, vì đó đã là một mẫu web lâu đời.