Machen Sie sich mit den heutigen Techniken aus Hover und ihrer Funktionsweise vertraut (gewinnen, erhalten).
Hover beschreibt das Bewegen eines Mauszeigers über ein anklickbares Objekt, klickt jedoch nicht mit der linken oder rechten Maustaste.
Wenn Sie beispielsweise mit der Maus über einen Link auf dieser Seite fahren, bemerken Sie, dass sich deren Farbe ändert, was darauf hinweist, dass er angeklickt werden kann.
Sie werden sehen, dass diese Aktion zusätzliche Informationen zu dem Link anzeigt. Ein animiertes Bild ist ein Beispiel dafür, wie sich der Cursor ändert, wenn er sich über verschiedene Elemente dreht.
Hover ist eigentlich mit dem Mauszeiger verbunden. Hovering ist der Vorgang, bei dem sich ein Mauszeiger zu einer bestimmten Position bewegt und seine Position ändert.
Warum wird Hover auf Websites verwendet?
Sie kennen die Antwort bereits. Aber wenn es keiner weiß, schau mal. Angenommen, Sie haben eine Download-Schaltfläche an Ihre Website angehängt.
Jetzt so lassen? In diesem Fall wird die Person, die Ihre Site betreten hat, die Site verlassen, nachdem sie sie gesehen hat. Dazu müssen Sie den Hover-Button Ihrer Site mit CSS dynamischer gestalten.
Z.B.
Es gibt mehrere Änderungen an der Hover-Schaltfläche. Wenn Sie den Mauszeiger über die Schaltfläche bewegen, wird die Schaltfläche schwarz und der Text weiß angezeigt. Siehe unten die Schaltfläche Poparty ist angegeben –
Polsterung: 5px; – Wie viel Platz um die Schaltfläche herum sein wird.
Randradius: 5px; – Wie rund der Knopf sein wird.
Cursor: Zeiger; – Ändern Sie den Mauszeiger über die Schaltfläche.
HTML-Eigenschaft:
Polsterung: 5px;
Randradius: 5px;
Cursor: Zeiger;
Schauen Sie sich die HOVER-Mohnblumen an –
Hintergrund:schwarz; – Wenn der Mauszeiger über die Schaltfläche fährt, wird die Schaltfläche schwarz.
Farbe weiß; – Wenn der Mauszeiger über die Schaltfläche zeigt, wird der Download-Text innerhalb der Schaltfläche weiß.
HOVER-Poperty:
.lhbtn:schweben{
Hintergrund:schwarz;
Farbe weiß;
}
Unten ist der Code für eine vollständige CSS Dynamic HOVER-Schaltfläche. Schauen Sie genau hin, kopieren Sie ggf. den Code von hier und platzieren Sie den Button auf Ihrer Site.
/* Hover-Button anpassen */
.links-Taste {
Anzeige: Inline-Block;
Randradius: 4px;
Hintergrundfarbe:#0541ce;
Rand: keine;
Farbe: #137AFF;
Textausrichtung: Mitte;
Schriftgröße: 18px;
Polsterung: 5px;
Breite: 150px;
Höhe: 35px;
Übergang: alle 0,5s;
Cursor: Zeiger;
Rand: 5px;
}
.lh-Tastenspanne {
Cursor: Zeiger;
Anzeige: Inline-Block;
Position: relativ;
Übergang: 0,5s;
Farbe weiß;
}
.lh-Taste span:nach {
Inhalt: ‘ 0bb’;
Position: absolut;
Deckkraft: 0;
oben: 0;
rechts: -20px;
Übergang: 0,5s;
}
.lh-taste:hover span {
Auffüllen-rechts: 25px;
}
.lh-button:hover span:after {
Deckkraft: 1;
rechts: 0;
}
Vorschau:
