visibility
Ukrywa element, ale zostawia puste miejsce, które zajmował.
- Wartość domyślna
visible- Dziedziczona
- Tak
- Animowalna
- tak, skokowo (widoczny przez cały czas przejścia)
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.visibility = "hidden"
Przykład
#.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
}
.trigger:hover .tooltip {
visibility: visible;
opacity: 1;
}<p class="trigger stage">Najedź tutaj kursorem
<span class="tooltip box" style="display: inline-grid; margin-left: 8px;">Podpowiedź</span>
</p>Definicja i zastosowanie
#Właściwość visibility pokazuje albo ukrywa element bez zmiany układu strony. Element z visibility: hidden staje się niewidoczny i nie da się go kliknąć, ale jego miejsce zostaje zarezerwowane. To odróżnia go od display: none, który usuwa element całkowicie.
W przeciwieństwie do większości właściwości visibility jest dziedziczona. Dziecko ukrytego rodzica może jednak ustawić visibility: visible i znów się pokazać.
Właściwość da się płynnie przejść w animacji, co przydaje się przy menu i podpowiedziach. Najczęściej łączy się ją z opacity, żeby element najpierw zanikał, a dopiero potem stawał się nieklikalny.
Składnia
#visibility: visible | hidden | collapse;Wartości
#Wartości w praktyce
#visible
.demo { visibility: visible; }collapse
hidden..demo { visibility: collapse; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Ukryty przez
visibility: hiddenelement nadal zajmuje miejsce. Jeśli ma zniknąć razem z luką, użyjdisplay: none. - Czytniki ekranu pomijają elementy z
visibility: hidden, tak samo jak zdisplay: none.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.