Cách hiển thị phần tử khi di chuột qua

Cách hiển thị phần tử khi di chuột qua

Bước 1 - Thêm HTML:

<div class="myDIV">Di chuột qua tôi.</div>
<div class="hide">Khi ai đó di chuột qua div trên, tôi sẽ hiển thị ra.</div>

Bước 2 - Thêm CSS:

.hide {
  display: none;
}
.myDIV:hover + .hide {
  display: block;
  color: red;
}

Thử trực tiếp

Giải thích ví dụ:

Chọn phần tử cùng cấp cận kề (+) chọn tất cả các phần tử cận kề với phần tử đã chỉ định.

Ý nghĩa của từ "cận kề" là "tiếp theo", ví dụ trên chọn tất cả các phần tử có class=".hide" Các yếu tố, các yếu tố này được đặt tiếp theo khi di chuột qua trên các phần tử có class=".myDIV" sau phần tử.

Trang liên quan

Hướng dẫn:Bộ kết hợp CSS