คุณสมบัติ visibility

คุณสมบัติ visibility กำหนดการมองไม่เห็น ให้กับองค์ประกอบ ในขณะที่องค์ประกอบอื่นๆทั้งหมด จะยังคงทำงานเหมือนเดิม ราวกับว่าองค์ประกอบนั้นไม่ได้หายไปไหน

ไวยากรณ์

ตัวเลือก {
	visibility: visible หรือ hidden หรือ collapse;
}

ค่า

ค่า	คำอธิบาย
`visible`	องค์ประกอบมองเห็นได้
`hidden`	องค์ประกอบจะกลายเป็นมองไม่เห็น ราวกับโปร่งใส แต่ยังคงมีส่วนร่วมในการจัดรูปแบบหน้าต่อไป
`collapse`	หากใช้ `collapse` กับเนื้อหาของเซลล์ตาราง เซลล์นั้นจะราวกับหายไป และตาราง จะถูกปรับรูปแบบใหม่ หากใช้ค่านี้กับองค์ประกอบที่ไม่ใช่แถวหรือคอลัมน์ของตาราง ผลลัพธ์จะเหมือนกับการใช้ `hidden`

ค่าเริ่มต้น: visible

ตัวอย่าง

มาทำให้ข้อความในย่อหน้าแรกมองไม่เห็นตั้งแต่เริ่มต้น แต่เมื่อเลื่อนเคอร์เซอร์มาที่ปุ่ม 'Show text' เราก็สามารถอ่านข้อความนั้นได้:

<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;
}

ดูเพิ่มเติม

คุณสมบัติ opacity,
ซึ่งกำหนดความโปร่งใสให้กับองค์ประกอบ
แอตทริบิวต์ hidden,
ซึ่งซ่อนองค์ประกอบออกจากหน้า