css3 anzeigen ausblenden

CSS3 ist die neueste CSS-Spezifikation. Ihr Erscheinen macht Webdesign-Effekte bunter. Eine der am häufigsten verwendeten Funktionen ist das Ein- und Ausblenden.

Es gibt viele Möglichkeiten, das Anzeigen und Ausblenden in CSS3 zu implementieren, die im Folgenden vorgestellt werden.

1. Verwenden Sie das Anzeigeattribut

Das Anzeigeattribut kann den Anzeigestatus des Elements steuern, einschließlich:

• none: Versteckt das Element, ohne Platz auf der Seite zu beanspruchen.
• Block: Zeigt das Element als Blockelement an.
• inline: Zeigt das Element als Inline-Element an.
• inline-block: Zeigt das Element als Inline-Blockelement an.

Durch Ändern des Werts des Anzeigeattributs können Elemente angezeigt und ausgeblendet werden. Der folgende Code zeigt beispielsweise ein Bild an, wenn die Maus über das Element fährt:

img {
  display: none;
}

div:hover img {
  display: block;
}

Im obigen Code ist die anfängliche Anzeigeeigenschaft des Bildes auf „Keine“ gesetzt, d. h. es ist ausgeblendet. Wenn Sie dann über div:hover img mit der Maus über das div-Element fahren, legen Sie das Anzeigeattribut des Bildes auf „Blockieren“ fest, um die Anzeige zu blockieren.

2. Verwenden Sie das Sichtbarkeitsattribut

Das Sichtbarkeitsattribut steuert die Sichtbarkeit des Elements. Im Gegensatz zum Anzeigeattribut belegt das Setzen des Sichtbarkeitsattributs weiterhin Platz auf der Seite. Zu seinen Werten gehören:

• sichtbar: Das Element ist sichtbar.
• versteckt: Das Element ist unsichtbar, nimmt aber dennoch Platz auf der Seite ein.

Der folgende Code implementiert die Anzeige von Textinhalten, wenn die Maus über das Element fährt:

div {
  visibility: hidden;
}

div:hover {
  visibility: visible;
}

Im obigen Code ist das anfängliche Sichtbarkeitsattribut des div-Elements auf „hidden“ (verborgen) gesetzt. Wenn sich die Maus dann über div:hover über dem div-Element bewegt, wird das Sichtbarkeitsattribut des Elements auf „sichtbar“ gesetzt, wodurch es angezeigt wird.

3. Verwenden Sie das Opazitätsattribut

Das Opazitätsattribut steuert die Transparenz des Elements. Sein Wertebereich liegt zwischen 0 und 1, 0 bedeutet vollständig transparent und 1 bedeutet vollständig undurchsichtig. Durch Ändern des Opazitätsattributwerts des Elements kann das Element ein- und ausgeblendet werden. Der folgende Code implementiert beispielsweise den Effekt des Ein- und Ausblendens des Elements, wenn die Maus über das Element fährt:

div {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

div:hover {
  opacity: 1;
}

Im obigen Code ist das anfängliche Opazitätsattribut des div-Elements auf 0 gesetzt, was vollständig transparent ist . Wenn sich die Maus dann über div:hover über dem div-Element befindet, setzen Sie die opacity-Eigenschaft des Elements auf 1, was vollständig undurchsichtig ist. Gleichzeitig wird das Übergangsattribut hinzugefügt, um den Ein- und Ausblendeffekt zu erzielen.

Die oben genannten Möglichkeiten, CSS3 zum Anzeigen und Ausblenden zu verwenden, können Sie je nach Bedarf auswählen. Es ist zu beachten, dass CSS3 mit einigen älteren Browsern nicht kompatibel ist. Daher sollten beim Schreiben von Code Kompatibilitätsprobleme berücksichtigt werden.

Das obige ist der detaillierte Inhalt voncss3 anzeigen ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!