Làm thế nào để làm việc với bộ chọn lựa sự kiện của CSS3

Hầu hết các thay đổi của CSS3 là tĩnh - bạn yêu cầu trình duyệt tìm kiếm các thẻ, thuộc tính hoặc mẫu cụ thể. Tuy nhiên, trình chọn sự kiện chọn các đối tượng dựa trên một sự kiện cụ thể, chẳng hạn như một con trỏ chuột lên.

Khi người dùng di chuột qua một đối tượng, định dạng của đối tượng thay đổi để biểu thị rằng sự kiện đã xảy ra. Khi người dùng di chuyển con trỏ chuột ra khỏi đối tượng, định dạng sẽ trở lại bình thường. Danh sách dưới đây cho bạn biết về trình chọn sự kiện mà các tài liệu thường sử dụng.

• : hover: Chọn một đối tượng khi con trỏ chuột lơ lửng trên đó. Các nhà phát triển thường sử dụng tính năng này để hiển thị rằng một mục được chọn hoặc để hiển thị chi tiết về một đối tượng. Bạn thấy tính năng này được sử dụng khá thường xuyên với các hệ thống menu để hiển thị các mục menu con.

• : focus: Chọn một đối tượng khi đối tượng có trọng tâm đầu vào (bàn phím). Nó thường được sử dụng với các biểu mẫu để hiển thị trường nào được chọn cho đầu vào. Một sử dụng thú vị của bộ chọn này là để hiển thị các lĩnh vực được lựa chọn trong một phông chữ lớn hơn để làm cho đầu vào dễ dàng hơn.

Bộ chọn sự kiện rất tiện dụng vì bạn có thể sử dụng chúng để làm cho trang xuất hiện trang đang tương tác với người dùng mà không cần viết ngay cả một dòng mã. Mọi thứ diễn ra như một phần của một phong cách. Thủ tục sau đây chỉ ra một cách để sử dụng selectors sự kiện để tạo ra một hiệu ứng hình ảnh.

1. Tạo ExternalCSS. HTML và ExternalCSS. CSS và sao chép chúng vào một thư mục mới.

2. Mở ExternalCSS. CSS.

3. Nhập mã sau đây sau các kiểu hiện tại và lưu các thay đổi vào đĩa.

   p: hover, h1: hover {text-decoration: none; font-family: "Arial", sans-serif; kích thước phông chữ: xx-lớn; màu: BlueViolet; background-color: Plum;}
   

4. Tải lại trang thử nghiệm.

5. Di chuột con trỏ chuột qua văn bản đoạn văn.

   Bạn thấy hiệu quả của việc thay đổi phong cách. Phong cách của văn bản thay đổi để phù hợp với tiêu chí lựa chọn.

   

6. Di chuột qua văn bản tiêu đề.

   Văn bản đoạn văn trở về bình thường và văn bản tiêu đề bây giờ khớp với tiêu chí lựa chọn. Bạn có thể sử dụng cách tiếp cận này với bất kỳ đối tượng nào trên màn hình và thực hiện bất kỳ thay đổi nào mong muốn.