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