Ιδιότητα visibility
Η ιδιότητα visibility ορίζει την αορατότητα
ενός στοιχείου. Σε αυτήν την περίπτωση, όλα τα άλλα στοιχεία
θα συμπεριφέρονται σαν το στοιχείο να μην είχε εξαφανιστεί.
Σύνταξη
επιλογέας {
visibility: visible ή hidden ή collapse;
}
Τιμές
| Τιμή | Περιγραφή |
|---|---|
visible |
Το στοιχείο είναι ορατό. |
hidden |
Το στοιχείο γίνεται αόρατο, σαν διαφανές και συνεχίζει να συμμετέχει στη μορφοποίηση της σελίδας. |
collapse |
Εάν χρησιμοποιήσετε collapse για τα περιεχόμενα των κελιών πινάκων,
τότε αυτά φαίνονται να εξαφανίζονται και ο πίνακας
αναδομείται εκ νέου.
Εάν αυτή η τιμή εφαρμοστεί όχι σε γραμμές ή στήλες πίνακα, τότε το αποτέλεσμα της χρήσης της θα είναι το ίδιο με το hidden.
|
Προεπιλεγμένη τιμή: visible.
Παράδειγμα
Ας κάνουμε το κείμενο της πρώτης παραγράφου αρχικά
αόρατο, αλλά όταν το δρομέας περνάει πάνω από το κουμπί
'Show text' να μπορούμε να το διαβάσουμε:
<button>Εμφάνιση κειμένου</button>
<div class="text">κείμενο1</div>
<div>κείμενο2</div>
div{
border: 1px solid black;
width: 100px;
}
.text {
visibility: hidden;
}
button:hover + .text {
visibility: visible;
}
:
