คุณสมบัติ visibility

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

ไวยากรณ์

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

ค่า

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

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม