თვისება visibility

თვისება visibility არეგულირებს ელემენტის ხილვადობას. ამ შემთხვევაში, ყველა სხვა ელემენტი იქცევა ისე, თითქოს ელემენტი არსად არ გაქრა.

სინტაქსი

სელექტორი {
	visibility: visible ან hidden ან collapse;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`visible`	ელემენტი ხილვადია.
`hidden`	ელემენტი ხდება უხილავი, თითქოს გამჭვირვალე და ამავდროულად აგრძელებს გვერდის ფორმატირებაში მონაწილეობას.
`collapse`	თუ `collapse` გამოვიყენებთ ცხრილების უჯრების შიგთავსზე, ისინი თითქოს ქრებიან და ცხრილი ახლიდან გადაიკეთება. თუ ეს მნიშვნელობა გამოიყენება არა ცხრილის რიგებზე ან სვეტებზე, მაშინ მისი გამოყენების შედეგი იგივე იქნება, რაც `hidden`.

ნაგულისხმევი მნიშვნელობა: visible.

მაგალითი

მოდით, გავაკეთოთ ისე, რომ პირველი აბზაცის ტექსტი თავდაპირველად იყოს უხილავი, მაგრამ კურსორის ღილაკზე მიტანისას 'Show text' ჩვენ შევძლოთ მისი წაკითხვა:

<button>ტექსტის ჩვენება</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,
რომელიც ამალებს ელემენტს გვერდიდან