CSS 11 – Sự kiện hover trong CSS

0
446
Việc di chuyển con trỏ chuột vào một đối tượng nào đấy chúng ta gọi nó là Hover. Trong bài này chúng ta tìm hiểu qua cách viết và sử dụng SELECTOR HOVER ra sao.

Hover Pseudo Class trong CSS

Sự kiện hover trong CSS hay nói đúng thuật ngữ trong CSS gọi là Hover Pseudo Class, nó được sử dụng để thêm style đặc biệt cho 1 phần tử khi người dùng di chuyển chuột qua nó. Khi định nghĩa các Pseudo Class trong CSS, bạn cần chú ý các điểm sau:
  • a:hover phải theo sau a:linka:visited trong phần định nghĩa CSS, nếu không nó sẽ không có hiệu quả.
  • a:active phải theo sau a:hover trong CSS, nếu không nó sẽ không có hiệu quả.
  • Các tên được sử dụng cho Pseudo Class là không phân biệt kiểu chữ.
  • Pseudo Class là khác với các Class khác trong CSS, tuy nhiên chúng có thể kết hợp với nhau.

Giá trị trong hover

Cú pháp: Trong đó: color: tất cả các giá trị màu hợp lệ Lưu ý: Sự kiện hover có thể áp dụng cho toàn bộ các thẻ trong HTML.

Các cách viết trong hover

Có 2 trường hợp sử dụng sự kiện hover, đó là:
  • hover vào thành phần và thành phần đó thay đổi định dạng. Cú pháp:
  • hover vào thành phần cha và thành phần con của nó thay đổi định dạng. Cú pháp:

Ví dụ tổng quát

Có ví dụ như sau: Cho 1 danh sách ul li Ví dụ 1: hover vào thẻ li và thẻ li có màu nền vàng CSS như sau: Ví dụ 2: hover vào thẻ cha li và thẻ a con bỏ gạch chân. CSS như sau:

Kết luận

Như vậy, qua 2 ví dụ, các bạn có thể hiểu rõ nhất về Sự kiện hover trong CSS rồi đúng không nào, hover cũng rất dễ sử dụng, nó có thể sử dụng cho mọi thẻ trong HTML. Chúc các bạn học tập tốt!  

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây