Wie man hover css Beispiele und Anweisungen macht

Der Effekt, wenn Sie den Mauszeiger über ein Element einer Webseite bewegen, ist eine großartige Möglichkeit, Ihrer Website Interaktivität und Dynamik hinzuzufügen. Eine Möglichkeit, diesen Effekt zu erzielen, besteht darin, die CSS-Pseudoklasse :hover zu verwenden. Es ermöglicht Ihnen, den Stil eines Elements zu ändern, wenn Sie den Mauszeiger bewegen.

Dank CSS :hover Sie können Farbe, Hintergrund, Größe, Schriftart und viele andere Eigenschaften ändern, um die Wichtigkeit eines Elements zu betonen oder die Aufmerksamkeit der Benutzer zu erregen. In diesem Artikel werden wir uns einige Anwendungsbeispiele ansehen :hover und geben Ihnen Anweisungen zum Erstellen.

Bevor wir anfangen, ist es wichtig zu verstehen, was CSS ist :hover wird nur auf das Element angewendet, wenn Sie den Mauszeiger bewegen. Sobald die Maus entfernt ist, kehrt der Stil des Elements in seinen ursprünglichen Zustand zurück. Lassen Sie uns nun beginnen, wunderbare Hover-Effekte mit CSS zu erstellen!

Was ist Hover in CSS und wie benutzt man es

Häufige Verwendung hover wird verwendet, um Interaktivität und Animationen auf Websites zu erstellen. Wenn Sie beispielsweise über eine Schaltfläche schweben, kann sie die Hintergrundfarbe oder den Schriftstil ändern, sodass Benutzer sehen können, dass das Element interaktiv ist.

So verwenden Sie hover in CSS müssen Sie die gewünschten Stile für das Element festlegen und dann eine Pseudoklasse hinzufügen :hover. Zum Beispiel:

button button:hover

In diesem Beispiel ändert sich die Hintergrundfarbe, wenn Sie über eine Schaltfläche schweben, in Grün und die Textfarbe in Schwarz.

Hover kann auch für jedes Element in HTML verwendet werden, z. B. Links, Bilder oder sogar Textblöcke.

Beachten Sie, dass Hover nur auf mauszeigerfähigen Geräten funktioniert. Auf Touchscreen-Geräten wie Smartphones oder Tablets funktioniert der Hover möglicherweise nicht oder verzögert.

Hover-Beispiele in CSS für verschiedene Elemente

Wenn Sie den Hover-Effekt in CSS anpassen (Erscheinen, Ändern oder Verschwinden beim Hover), können Sie interaktive und animierte Elemente auf einer Webseite erstellen. Betrachten wir einige Beispiele für die Anwendung von Hover für verschiedene Arten von Elementen.

1. Ändern der Textfarbe:

Wenn Sie über einen Absatz schweben, wird der darin enthaltene Text rot.

2. Unterstreichen eines Links:

Wenn Sie auf einen Link zeigen, wird dieser unterstrichen.

3. Ändern des Hintergrunds einer Schaltfläche:

Wenn Sie auf die Schaltfläche klicken, ändert sich die Hintergrundfarbe in Gelb.

4. Animieren des Bildausblendens:

Wenn Sie über das Bild schweben, verschwindet es reibungslos (die Transparenz ändert sich).

5. Erhöhen der Kopfzeilengröße:

Wenn Sie über den Titel der ersten Ebene schweben, erhöht sich die Größe auf 36 Pixel.

Dies sind nur einige Beispiele für die Verwendung von Hover in CSS. Die Möglichkeiten und Möglichkeiten, Elemente mit dieser Eigenschaft zu stylen, sind enorm.

Anleitung zum Erstellen von Hover-Effekten in CSS

Schritt 1: Erstellen Sie ein Element, dem Sie einen Hover-Effekt hinzufügen möchten. Es kann ein beliebiges HTML-Element wie eine Schaltfläche, einen Link, ein Bild usw. geben.

Schritt 2: Fügen Sie dem CSS Stile für dieses Element hinzu. Sie können beispielsweise die Hintergrundfarbe, die Schriftgröße ändern oder einen Rahmen hinzufügen. Aber um einen Hover-Effekt zu erzeugen, fügen Sie eine leere Klasse hinzu.

.hover-effect <>

Schritt 3: Fügen Sie Stile für den Hover-Effekt hinzu. Diese Stile werden nur dann auf ein Element angewendet, wenn Sie den Mauszeiger darüber bewegen. Sie können beispielsweise die Hintergrundfarbe ändern, die Schriftgröße erhöhen oder eine Animation hinzufügen.

.hover-effect:hover <>

Schritt 4: Fügen Sie dem Stilblock für den Hover-Effekt die gewünschten CSS-Eigenschaften hinzu. Wenn Sie beispielsweise die Hintergrundfarbe ändern möchten, verwenden Sie die Eigenschaft background-color, um die Schriftgröße zu erhöhen, verwenden Sie die Eigenschaft font-size, und verwenden Sie die Eigenschaft animation, um eine Animation hinzuzufügen. Beachten Sie, dass Sie beliebig viele Eigenschaften hinzufügen können, um den gewünschten Effekt zu erzielen.

Beachten Sie, dass "Shake" der Name der Animation ist, die Sie in Ihren Stilen definieren müssen.

Schritt 5: Speichern Sie die CSS-Datei und aktualisieren Sie die Seite, um den von Ihnen erstellten Hover-Effekt in Aktion zu sehen. Wenn Sie über ein Element schweben, sollten Sie die Änderungen an den Stilen sehen, die Sie für den Hover-Effekt festgelegt haben.

Jetzt wissen Sie, wie man Hover-Effekte in CSS erstellt. Sie können mit verschiedenen Eigenschaften und Animationen experimentieren, um einzigartige Effekte zu erstellen und Ihre Website interaktiver zu gestalten.

Wie man einen Hover-Effekt zu einem Text in CSS hinzufügt

Um einen Hover-Effekt auf Text anzuwenden, müssen Sie einen Selektor verwenden, der sich auf das entsprechende Element bezieht (z. B., p, h1, a geben Sie dann die Stile an, die beim Bewegen des Cursors angewendet werden sollen. Zum Beispiel:

In diesem Beispiel ändert sich die Farbe des Textes, wenn Sie den Mauszeiger über einen Absatz bewegen, in Rot und die Schriftart ist fett.

Es ist auch möglich, beim Hover-Effekt verschiedene Animationen und Übergänge hinzuzufügen. Zum Beispiel:

In diesem Beispiel ändert sich die Textfarbe, wenn Sie den Mauszeiger über einen Absatz bewegen, reibungslos in Blau für 0.5 sekunden mit Ease-in-Out-Effekt.

Hover-Effekte werden häufig verwendet, um interaktive und ansprechende visuelle Effekte auf Webseiten zu erstellen. Verwenden Sie sie mit Bedacht und experimentieren Sie, um einzigartige Designs zu erstellen.

Hover-Effekte für Bilder in CSS

Wenn wir unseren Bildern zusätzliche Interaktivität auf einer Website verleihen möchten, können wir Hover-Effekte in CSS verwenden. Hover (Prinzipien :Hover) ermöglicht es uns, den Stil zu ändern oder Animationen zu Elementen hinzuzufügen, wenn wir mit dem Mauszeiger über sie schweben oder auf Touchscreen-Geräten berühren.

Um Hover-Effekte für Bilder in CSS zu erstellen, können wir die Pseudoklasse :hover verwenden und neue Stile für das Bild definieren. Hier sind einige Beispiele für Hover-Effekte für Bilder:

• Transparenz ändern: Wenn Sie den Mauszeiger bewegen, wird das Bild vollständig undurchsichtig.
• Größenänderung: beim Schweben vergrößern wir die Größe des Bildes.
• Hintergrundfarbe ändern: Beim Schweben ändern wir die Hintergrundfarbe des Bildes.
• Ändern der Helligkeit: Beim Schweben erhöhen wir die Helligkeit des Bildes.
• Animation hinzufügen: Beim Schweben fügen wir dem Bild eine Animation hinzu.

Um den Hover-Effekt anzuwenden, müssen wir neue Stile in CSS definieren, indem wir die Pseudoklasse verwenden :hover. Zum Beispiel können wir den folgenden Code verwenden, um die Transparenz eines Bildes zu ändern:

Der obige Code wird auf das Bild angewendet, wenn Sie den Cursor bewegen und es vollständig transparent machen. Wir können die Anzahl und den Wert der Stile ändern, um verschiedene Hover-Effekte zu erzeugen.

Hover-Effekte für Bilder können das Aussehen einer Website verbessern und sie für Benutzer attraktiver machen. Dies ist eine großartige Möglichkeit, ein wenig Interaktivität hinzuzufügen und die Bedeutung von Bildern auf einer Seite hervorzuheben. Werfen Sie einen Blick in die CSS-Dokumentation und experimentieren Sie mit verschiedenen Stilen, um einzigartige und effektive Hover-Effekte für Ihre Bilder zu erstellen.

So erstellen Sie Hover-Effekte für Links in CSS

Die Beschriftung eines Links kann ein sehr wichtiges Element einer Webseite sein. Das Styling von Links mit Mausbewegungseffekten kann dazu beitragen, ihre Bedeutung hervorzuheben und die Aufmerksamkeit der Besucher auf die Website zu lenken.

In CSS gibt es mehrere Möglichkeiten, Hover-Effekte für Links zu erstellen. Eine der einfachsten und beliebtesten Methoden besteht darin, die Farbe eines Links zu ändern, wenn Sie die Maus darüber bewegen.

Sie können eine Pseudoklasse verwenden, um einen solchen Effekt zu erzeugen :hover. Hier ist ein Beispielcode:

In diesem Beispiel ändert sich die Farbe, wenn Sie auf einen Link zeigen, in Blau.

Sie können auch Animationen für einen interessanteren Effekt hinzufügen. Sie können beispielsweise einen Übergang verwenden, um die Eigenschaften eines Links beim Hover nahtlos zu ändern:

In diesem Beispiel ändert sich die Farbe des Links in 0,5 Sekunden glatt in Blau.

Neben dem Ändern der Farbe können Sie auch andere Stile für Links hinzufügen, wenn Sie die Maus bewegen. Sie können beispielsweise den Hintergrund eines Links ändern oder einen Unterstrich hinzufügen:

In diesem Beispiel wird der Hintergrund gelb und der Linktext wird unterstrichen, wenn Sie über einen Link schweben.

Sie können Bilder auch als Hintergrund für Hover-Links verwenden. Hier ist ein Beispielcode:

In diesem Beispiel wird ein Bild als Hintergrund verwendet, wenn Sie über einen Link schweben hover_bg.png.

Verwenden Sie diese Beispiele und experimentieren Sie mit verschiedenen Stilen und Effekten, um schöne und interaktive Links auf Ihrer Website zu erstellen.