Pseudo-class :hover của CSS

Định nghĩa và cách sử dụng

CSS :hover Các pseudo-class được sử dụng để chọn phần tử khi trỏ chuột悬浮.

Lưu ý::hover Các pseudo-class có thể được sử dụng cho tất cả các phần tử, không chỉ là liên kết.

Lưu ý:Vui lòng sử dụng :link Thiết lập phong cách cho liên kết chưa truy cập, sử dụng :visited Thiết lập phong cách cho liên kết đã truy cập, sử dụng :active Thiết lập phong cách cho liên kết hoạt động.

Lưu ý:Trong định nghĩa CSS,:hover phải được đặt trong :link và :visited（nếu có) mới có thể hoạt động!

Mô hình

Ví dụ 1

Chọn và thiết lập phong cách cho các liên kết khi trỏ chuột悬浮:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Thử ngay

Ví dụ 2

Chọn và thiết lập phong cách cho các phần tử <p>、<h1> và <a> khi trỏ chuột悬浮:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Thử ngay

Ví dụ 3

Chọn và đặt lại樣式 cho liên kết chưa truy cập, đã truy cập,悬停在 trên và đang hoạt động:

/* Liên kết chưa truy cập */
a:link {
  color: green;
}
/* Liên kết đã truy cập */
a:visited {
  color: green;
}
/* Liên kết đang悬停在 trên */
a:hover {
  color: red;
}
/* Liên kết đang hoạt động */
a:active {
  color: yellow;
}

Thử ngay

Ví dụ 4

Đặt樣式 khác nhau cho liên kết:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Thử ngay

Ví dụ 5

悬浮 trên yếu tố <span> để hiển thị yếu tố <div> (giống như tooltip):

div {
  display: none;
}
span:hover + div {
  display: block;
}

Thử ngay

Ví dụ 6

Hiển thị và ẩn menu thả khi chuột悬停在 trên:

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Thử ngay

Ngữ pháp CSS

:hover {
  các biểu thức css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn pseudo-class.

Trang liên quan

Hướng dẫn:CSS Liên kết

Hướng dẫn:CSS ảo