Elemente ausblenden

Der letzte Wert von display, den wir uns ansehen, ist none. Ein Element mit display: none wird gar nicht angezeigt und nimmt keinen Platz ein: Die Elemente danach rücken nach oben, als wäre es nicht da. Es steht weiterhin im HTML; der Browser zeigt es nur nicht an.

Vergleiche es mit opacity: 0, das du aus der Lektion über Farben kennst. Das macht ein Element vollständig durchsichtig, aber das Element nimmt weiterhin seinen Platz ein, es bleibt also eine leere Lücke auf der Seite.

Ausblenden ist nützlich für Inhalte, die nur in einem bestimmten Moment erscheinen sollen: ein Menü, das sich öffnet, wenn man mit der Maus darüberfährt, ein Tooltip oder die Antwort auf eine Quizfrage. Ein solches Element blenden wir mit display: none aus und zeigen es in einer Regel mit der Pseudoklasse :hover wieder an, die du aus der Lektion über Selektoren kennst.

Wir haben dem Abschnitt Physiologie der Seite ein kurzes Quiz hinzugefügt. Blenden wir seine Antwort aus, bis der Leser mit der Maus über das Quiz fährt.