Cách THỰC HIỆN - Hiển thị một phần tử trên Di chuột
Tìm hiểu cách hiển thị một phần tử khi di chuột.
Di chuột qua tôi.
I am shown when someone hovers over the div above.
Cách hiển thị một phần tử trên Di chuột
Bước 1) Thêm HTML:
Thí dụ
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when
someone hovers over the div above.</div>
Bước 2) Thêm CSS:
Thí dụ
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
Giải thích ví dụ
Bộ chọn anh chị em kế cận ( +
) chọn tất cả các phần tử là anh chị em kế cận của một phần tử được chỉ định.
Từ "liền kề" có nghĩa là "ngay sau đó" và ví dụ trên chọn tất cả các phần tử có class=".hide"
, được đặt ngay sau các phần tử với class=".myDIV
", khi di chuột.
Đi tới Hướng dẫn CSS Combinators của chúng tôi để tìm hiểu thêm về các bộ chọn liền kề.