Dieser Artikel ist Teil der ATOZ CSS -Serie. Hier finden Sie andere Eintr?ge in dieser Serie: Die vollst?ndige Serie Zeigen Sie die vollst?ndigen Video- und Textdatens?tze von Hover -Effekten an

Willkommen in unserer Atoz CSS -Serie! In dieser Serie werde ich mit Buchstaben im Alphabet beginnen und verschiedene CSS -Werte (und Eigenschaften) erforschen. Wir wissen, dass manchmal Screenshots nicht genug sind, und in diesem Beitrag haben wir Ihnen einen neuen Tipp für die Auswirkungen des Schwebes hinzugefügt.

h steht für schweb- und H?he

In Bezug auf den Schwebeffekt habe ich bereits viel in das Video über Brief H eingeführt, also werde ich hier nicht in Details eingehen. Sie k?nnen jedoch einige coole Animationen auf den Schwebezustand anwenden. Suchen Sie bei Google nach "CSS -Hover -Effekten" und Sie werden viel finden.

Folgendes sind einige Websites mit cleveren Effekten:

• codrops: CSS -übergangsschwebeffekte
• Design Shack: Paste -Hover -Effekte kopieren
• CSS-Tricks: Pop Hobs

Ich habe kürzlich ein Video für die Codeschule gemacht, alles über eine Bibliothek namens hover.css.

Eine andere CSS H -Eigenschaft (ich habe sie auf dieser Website nicht im Detail beschrieben) ist die H?he (H?he).

H?henattribut wird verwendet, um die Inhaltsh?he des Elements zu definieren. Alle Standardl?ngeneinheiten (wie PX, EM, REM, %, VW, VH und andere Einheiten) k?nnen zur Steuerung der H?he verwendet werden.

Wenn die H?he eines Elements nicht explizit eingestellt ist, wird sie als Mindesth?he berechnet, die alle enthaltenen Elemente entspricht (entsprechend dem Standardwert des Standardwerts).

Es wird im Allgemeinen empfohlen, ausdrücklich die H?he eines beliebigen Elements ausdrücklich zu vermeiden, da es die Flexibilit?t des Elements einschr?nkt - dh es kann nicht wachsen, wenn sich der Inhalt ?ndert. Dies ist besonders wichtig bei reaktionsschnellen Designs, wenn der Inhalt mit dem ?ndert die verfügbaren Breite vertikal neu angeordnet werden muss.

Daher neige ich dazu, die H?he nur auf Elementen mit vordefinierten Gr??en wie Bildern zu setzen. Ein weiterer Anwendungsfall ist, dass bei Verwendung der absoluten oder festen Positionierung die H?he (und die Breite) um das Positionierungselement umgeht.

Das folgende Beispiel zeigt das Problem der Festlegung einer festen H?he.

Beispielcode

W?hrend der erste Satz von Text korrekt aussieht, ist der Stil, sobald der Text kürzer oder l?nger als der Stil ist, nicht mehr korrekt - das Einschlussfeld erscheint zu gro? oder der Text überl?uft au?erhalb des Box.

Eine M?glichkeit, den Textüberlauf zu beheben, besteht darin, die überlaufeigenschaft zu verwenden, dies jedoch den Text abschneidet und ihn unleserlich macht.

Dies kann vollst?ndig vermieden werden, wenn die H?he am Anfang nicht angegeben ist. Wenn ich die Flexibilit?t des Codes verbessern k?nnte, ohne etwas zu tun, würde ich mich dafür entscheiden, dies ohne zu z?gern!

FAQs über CSS -Hoverh?hen (FAQs)

Wie hoch ist der CSS -Schwebeffekt und wie funktioniert es?

CSS-Hover-Effekt ist eine Pseudoklasse, die Stile anwendet, wenn der Mauszeiger über ein Element schwebt. Es wird h?ufig verwendet, um interaktive Effekte auf Webseiten zu erzeugen, z. B. das ?ndern der Farbe einer Taste, wenn die Maus darüber schwebt. Der Schwebeffekt wird angewendet, indem der Selektor ": Hover" verwendet wird, gefolgt von dem zu ?ndernden CSS -Attribut. Um beispielsweise die Hintergrundfarbe der Taste in Rot zu ?ndern, wenn die Maus über sie schwebt, k?nnen Sie den folgenden Code verwenden:

button:hover {
  background-color: red;
}

Wie kann man die H?he eines Elements mithilfe von CSS -Hover -Effekt ?ndern?

Sie k?nnen die H?he eines Elements unter Verwendung des CSS -Schwebeffekts ?ndern, indem Sie eine neue H?he in der Schweberegel angeben. Wenn Sie beispielsweise die H?he erh?hen m?chten, wenn Ihre Maus über ein Div -Element schwebt, k?nnen Sie den folgenden Code verwenden:

div:hover {
  height: 200px;
}

In diesem Beispiel wechselt die Maus, wenn sich die Maus über dem Div übersieht, die H?he des Divs auf 200px.

Kann ich den CSS -Schwebeffekt mit Medienabfragen verwenden?

Ja, Sie k?nnen CSS -Schwebeffekte mit Medienabfragen verwenden, um reaktionsschnelle Schwebeffekte zu erzeugen. Beispielsweise k?nnen Sie Medienabfragen verwenden, um Schwebeffekte nur dann anzuwenden, wenn der Bildschirm eine bestimmte Breite hat. Hier ist ein Beispiel:

@media (min-width: 600px) {
  div:hover {
    height: 200px;
  }
}

In diesem Beispiel wird der Schwebeffekt nur angewendet, wenn die Bildschirmbreite mindestens 600 PX betr?gt.

Kann ich mehrere Eigenschaften mit dem CSS -Hover -Effekt gleichzeitig ?ndern?

Ja, Sie k?nnen mehrere Eigenschaften mit dem CSS -Hover -Effekt gleichzeitig ?ndern. Zum Beispiel k?nnen Sie die H?he, Breite und Hintergrundfarbe des DIV -Elements ?ndern, wenn Sie darüber schweben. Hier ist ein Beispiel:

div:hover {
  height: 200px;
  width: 200px;
  background-color: red;
}

In diesem Beispiel, wenn sich die Maus über der Div -DIV schwebt, ?ndert sich die H?he, Breite und Hintergrundfarbe der DIV.

Kann ich übergangseffekte unter Verwendung von CSS -Hover -Effekten erstellen?

Ja, Sie k?nnen den CSS -Schwebeffekt in Verbindung mit der übergangseigenschaft verwenden, um einen reibungslosen übergangseffekt zu erzeugen. Sie k?nnen beispielsweise einen übergangseffekt erzeugen, der die H?he des DIV -Elements in 2 Sekunden nach und nach ver?ndert, w?hrend die Maus über das Div -Element schwebt. Hier ist ein Beispiel:

div {
  transition: height 2s;
}

div:hover {
  height: 200px;
}

In diesem Beispiel wechselt die Maus, wenn sich die Maus über dem Div übersieht, die H?he des Divs in 2 Sekunden allm?hlich auf 200px.

Bitte beachten Sie, dass ich alle Bildlinks als Platzhalter ersetzt habe, da ich nicht auf das Originalbild zugreifen kann. Bitte ersetzen Sie den Platzhalter durch den tats?chlichen Bildlink. In ?hnlicher Weise werden die Orte, an denen Links im Artikel ben?tigt werden, auch von Platzhaltern ersetzt, bitte ersetzen Sie sie gem?? der tats?chlichen Situation.

Das obige ist der detaillierte Inhalt vonATOZ CSS Schneller Tipp: Verwenden Sie Schwebe und H?he. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!