The visibility property
The visibility property sets an element's
invisibility. In this case, all other elements
will behave as if the element had never
disappeared.
Syntax
selector {
visibility: visible or hidden or collapse;
}
Values
| Value | Description |
|---|---|
visible |
An element is visible. |
hidden |
An element becomes invisible, as if transparent, and at the same time continues to participate in page formatting. |
collapse |
If you use collapse for the contents
of table cells, then they seem to disappear,
and the table is rebuilt in a new way.
If this value is not applied to table rows or columns, then the result of its use will be the same as with hidden.
|
Default value: visible.
Example
Let's make the text of the first paragraph
initially invisible, but when we hover over
the 'Show text' button we can read it:
<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;
}
:
