Thuộc tính visibility

Thuộc tính visibility thiết lập sự ẩn hiện cho phần tử. Khi đó tất cả các phần tử khác sẽ hành xử như thể phần tử này không biến mất đi đâu cả.

Cú pháp

bộ chọn {
	visibility: visible hoặc hidden hoặc collapse;
}

Giá trị	Mô tả
`visible`	Phần tử hiển thị.
`hidden`	Phần tử trở nên không nhìn thấy, như trong suốt và đồng thời vẫn tiếp tục tham gia vào việc định dạng trang.
`collapse`	Nếu sử dụng `collapse` cho nội dung của các ô bảng, thì chúng như thể biến mất, và bảng sẽ được xây dựng lại từ đầu. Nếu giá trị này được áp dụng không phải cho hàng hoặc cột của bảng, thì kết quả sử dụng của nó sẽ giống như `hidden`.

Giá trị mặc định: visible.

Hãy làm sao để văn bản của đoạn đầu tiên ban đầu không hiển thị, nhưng khi di chuyển con trỏ đến nút 'Show text' chúng ta có thể đọc được nó:

<button>Show text</button>
<div class="text">text1</div>
<div>text2</div>

div{
	border: 1px solid black;
	width: 100px;
}
.text {
	visibility: hidden;
}
button:hover + .text {
	visibility: visible;
}