:hover
trước đây 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 mọi phần tử. Đ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 gốc rồi hiển thị cấp độ tiếp theo của menu lồng nhau. Tuy nhiên, hãy cẩn thận, các hiệu ứng di chuột phải được kết hợp với một số loại hành động, vì đó đã là một mẫu web được thiết lập từ lâu Các. bộ chọn di chuột Lớp giả CSS được sử dụng để tạo kiểu cho các phần tử khi chuột di chuột qua chúng. Nó có thể được sử dụng trên mọi yếu tố
Chúng tôi có thể tạo kiểu cho các liên kết cho các trang chưa được truy cập bằng cách sử dụng. bộ chọn liên kết, để tạo kiểu cho các liên kết đến các trang đã truy cập, hãy sử dụng. bộ chọn đã truy cập & để tạo kiểu cho liên kết đang hoạt động, hãy sử dụng. bộ chọn hoạt động. Nếu. liên kết và. các bộ chọn đã truy cập có trong định nghĩa CSS thì để thấy được hiệu ứng, chúng ta phải thêm. bộ chọn di chuột sau nó
cú pháp
element :hover{ // CSS declarations; }
ví dụ 1. Ví dụ này minh họa việc thay đổi màu nền khi di chuột qua một phần tử
HTML
:hover
0
:hover
03
4
5
4
7
:hover
09
:hover
0
_______41____48____6
đầu ra
ví dụ 2. Ví dụ này đang hiển thị một khối ẩn khi di chuột qua văn bản
HTML
:hover
0
:hover
02
4
>
4
4
>
6
4
5
4
:hover
0______415
16
15
>
_______41____48____6
đầu ra
ví dụ 3. Ví dụ này minh họa việc thay đổi màu phông chữ khi di chuột qua một phần tử
HTML
:hover
0
:hover
03
4
39
:hover
09
:hover
0
_______41____48____6
đầu ra
Ví dụ 4. Ví dụ này minh họa việc thay đổi họ phông chữ của văn bản khi di chuột qua nó.
HTML
:hover
0
:hover
03
4
81
:hover
09
:hover
0
_______41____48____6
đầu ra
Ví dụ 5. Ví dụ này minh họa việc thay đổi trang trí văn bản thành gạch chân khi di chuột qua một phần tử