Λύσεις — Εφαρμογή 10 · Εμφάνιση ΚΑΙ απόκρυψη — div, span, display (σελ. 49–53) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 10 · Εμφάνιση & απόκρυψη — div, span, display (σελ. 49–53)

Ο κώδικας-λύση και ασκήσεις (div vs span, display none/block/inline, απόκρυψη/εμφάνιση με :hover, ψευδο-στοιχεία first-line/first-letter). Γλώσσες HTML5+CSS.

Ο κώδικας-λύση της Εφαρμογής 10

Ερώτηση: Φτιάξτε μια ενότητα που κρύβει ένα div και το εμφανίζει όταν περνά το ποντίκι.

Απάντηση:

<div class="epilogi">Πέρνα από πάνω μου!
  <div>Κρυμμένο περιεχόμενο <span>(λεπτομέρεια)</span></div>
</div>

.epilogi div { display: none; }        /* αρχικά κρυμμένο */
.epilogi:hover div { display: block; } /* εμφάνιση στο hover */

Σύνοψη: (ενδεικτική) Εσωτερικό div με display:none· .epilogi:hover div { display:block } το εμφανίζει όταν το ποντίκι είναι πάνω.

Κριτήρια αξιολόγησης:

• Κριτήριο: display:none αρχικά + .epilogi:hover div { display:block }.

div vs span

Ερώτηση: Ποια η διαφορά <div> από <span>;

Απάντηση:

• <div>: δοχείο μπλοκ — ξεκινά σε νέα γραμμή και πιάνει όλο το πλάτος (για ενότητες/τμήματα).
• <span>: δοχείο σε σειρά (inline) — μέσα στη ροή του κειμένου, χωρίς αλλαγή γραμμής (για λέξεις/φράσεις).

Σύνοψη: (ενδεικτική) div: μπλοκ (νέα γραμμή, όλο το πλάτος). span: inline (μέσα στη ροή, χωρίς αλλαγή γραμμής).

Κριτήρια αξιολόγησης:

• Κριτήριο: block (div) vs inline (span).

Η ιδιότητα display

Ερώτηση: Ποιες βασικές τιμές παίρνει η display και τι κάνει η display: none;

Απάντηση:

• block (μπλοκ, νέα γραμμή), inline (σε σειρά), inline-block (μπλοκ που ρέει), none.
• Η display: none κάνει το στοιχείο να μην εμφανίζεται καθόλου (ούτε πιάνει χώρο) — κλασικός τρόπος απόκρυψης.

Σύνοψη: (ενδεικτική) block/inline/inline-block/none. Το display:none κρύβει τελείως το στοιχείο (δεν πιάνει χώρο).

Κριτήρια αξιολόγησης:

• Κριτήριο: οι τιμές + display:none = απόκρυψη.

Απόκρυψη με :hover & ψευδο-στοιχεία

Ερώτηση: Πώς εμφανίζουμε κρυμμένο περιεχόμενο με hover χωρίς προγραμματισμό; Τι κάνουν τα :first-line/:first-letter;

Απάντηση:

• Κρύβουμε αρχικά (display: none) και εμφανίζουμε με συνδυασμό επιλογέα + :hover, π.χ. .epilogi:hover div { display: block; }.
• :first-line μορφοποιεί την πρώτη γραμμή ενός στοιχείου· :first-letter τον πρώτο χαρακτήρα (π.χ. αρχίγραμμα).

Σύνοψη: (ενδεικτική) Με display:none + .Χ:hover ... { display:block }. :first-line = πρώτη γραμμή, :first-letter = πρώτος χαρακτήρας.

Κριτήρια αξιολόγησης:

• Κριτήριο: μηχανισμός hover για εμφάνιση + ρόλος first-line/first-letter.