:hover Pseudo Class trong CSS

:hover Pseudo Class trong CSS được sử dụng để thêm style đặc biệt cho một phần tử khi người dùng di chuyển chuột qua nó.

Khi định nghĩa các Pseudo Class trong <style>...</style>, bạn cần chú ý các điểm sau:

a:hover PHẢI theo sau a:link và a: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.

:hover Pseudo Class có thể nhận giá trị:

color: bất kỳ giá trị màu hợp lệ nào.

Quảng cáo

:hover Pseudo Class có thể áp dụng cho:

Các phần tử Anchor / Link trong HTML.

Ví dụ minh họa :hover Pseudo Class trong CSS

Sau đây là ví dụ minh họa cách sử dụng :hover Pseudo Class trong CSS:

<html>
   <head>
      <style type="text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>
   <body>
      <a href="../../css/index.jsp">Ban di chuyen chuot qua day</a>
   </body>
</html>

Bạn di chuyển chuột qua link để thấy kết quả:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: