Der Hover-Selektor ist Teil der Pseudoklasse. Dieser Effekt wird verwendet, um den Inhalt im HTML zu stylen, wenn der Cursor der Maus über sie schwebt. Wir können diesen Effekt auf jedes Element anwenden. Dieser Artikel enthält eine grundlegende Verwendung einer Hover -Klasse in HTML und CSS.

Zweck des Schwebeffekts

In jedem Dokument oder Browser verwenden wir die Links zu Websites, um den Benutzer zu unterstützen. Zu diesem Zweck können wir die Links für die Seiten stylen, die noch nicht mit der Link -Selektorklasse besucht werden. In ähnlicher Weise verwenden wir für die bereits besuchten Links den besuchten Selektor. Für die aktiven Links wird ein aktiver Selektor verwendet. Dies sind alle Verbindungsstile, die die Auswirkungen auf den Schwebedruck zeigen. Wenn der Link und der Selektor der besuchten Links in der CSS -Definition beide vorhanden sind, verwenden wir eine Schwebeauswahlklasse, um den resultierenden Effekt anzuzeigen.

Andererseits verursacht es, wenn wir in HTML auf ein Element in HTML schweben möchten.

Syntax des Schwebelements

Content_of_html: Hover
// CSS -Code oder Effekte deklarieren, die Sie anwenden möchten.

Beispiel 1: Schwebe ändert die Farbe des Textes

Dieses Beispiel befasst sich mit der Transformation des Textes, wenn wir den Cursor der Maus zu ihm bewegen. Wir können die verschiedenen Bedingungen auf den Text anwenden. Aber vorerst sind die folgenden beiden grundlegenden Änderungen: die Änderung der Farbe des Textes, auf den der Schwebede angewendet wird.

Verwenden Sie mit dem Abschnitt HTML Head das Style -Tag darin, während wir einen internen Stil durchführen. Verwenden Sie den Stilabschnitt im Tag. Eine Schwebeklasse wird verwendet, um alle Auswirkungen auf den Text der Überschrift anzuwenden. Also wird H1 mit der Hover -Klasse verwendet.

H1: Hover
Farbe weiß;
Hintergrundfarbe: lila;

Die beiden Eigenschaften, wie wir bereits diskutiert haben, werden angewendet. Standardmäßig ist die Farbe der Überschrift schwarz und die Hintergrundfarbe der Webseite ist weiß. Bei schwachem Umfang wird die Hintergrundfarbe dieses angegebenen Teils lila, so dass die Textfarbe auch in Weiß ändert.

HTML CSS -Code:

Schließen Sie das Style -Tag und den Kopfabschnitt von HTML. In Richtung des Körperteils wird eine Überschrift 1 deklariert. Die Ausrichtung für die Überschrift1

ist auf die Mitte eingestellt. Schließen Sie alle Tags und speichern Sie die Datei "Text Editors". Um die Ausgabe auszuführen, müssen wir die Datei im Browser ausführen. Während des Speicherns der Datei sollte eine Sache berücksichtigt werden: Speichern Sie die Datei mit der HTML -Erweiterung, anstatt sie mit der Textweiterung zu speichern. Öffnen Sie mit dem Standardbrowser, damit Sie die Ausgabe erhalten können.

Ausgang:
Video Playerhttps: // LinuxHint.com/wp-content/uploads/2022/06/Video2.MP400: 0000: 0000: 10use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.

Die Ausgabe im Browser wird in Form einiger Sekunden-Videos erfasst, die zum Überschuss bei der Anzeige der Ergebnisse führt. Bei der Ausführung der Datei sehen Sie, dass eine einfache Überschrift in der Mitte der Webseite angezeigt wird. Wenn wir den Cursor nahe der Überschrift nehmen oder über die Überschrift schweben, wird die Hintergrundfarbe und die Schriftfarbe geändert. Immer wenn der Cursor zurückbewegt ist, kommt es wieder auf Standard.

Beispiel 2: Der Schwebe baut einen Block mit Text auf

Anders als im vorherigen Beispiel, bei dem der vorhandene Text bei Schwebungen geändert wurde, wird in diesem Beispiel ein neuer Inhalt (Block) von HTML hinzugefügt, der nur angezeigt wird, wenn wir über den angegebenen Text schweben. Dieser Block hat auch einige Dimensionen und Spezifikationen. Lassen Sie uns das Verfahren erläutern.

Beginnend mit dem CSS. Diese DIV erstellt einen Inhaltsblock, der das Ergebnis des Überflusses über den Text ist. Die Breite und Höhe sind die beiden Grundwerte, die angewendet werden, um eine beliebige Form in HTML zu bilden. Als nächstes kommt die Padding -Immobilie. Es ist der Entfernungsbereich des Inhalts innerhalb eines Blocks oder einer Form. Zum Beispiel haben wir einen Text in den Block genommen, so dass der Abstand des Textes und die Grenze der Form als Polsterung genommen werden. Wenn nur die Polsterung verwendet wird, bedeutet dies, dass es die Entfernung in der Box auf jeder Seite ist. Wenn die Polsterung von einer bestimmten Seite aus erfolgt, da wir die Polsterung von rechts verwendet haben, bedeutet dies, dass es die Entfernung auf der rechten Seite ist. Diese Eigenschaft hält den Text in der Grenze des Blocks. Andernfalls besteht die Chancen, den Text aus dem Grenze des Blocks zu übertreffen.

Polsterung: 20px;
Padding-Right: 50px;

Dieser Padding -Effekt wird angewendet, um den inneren Inhalt mit dem äußeren Inhalt auszurichten. Der Wert wird in Pixeln eingenommen.

CSS -Code:

Die Schriftgröße und die Schriftfarbe des Textes werden auf den Text im Block angewendet. Im nächsten Abschnitt im Stil geht es um die Überschrift, die wir im Schwebedruck aufgetragen haben. Da der Inhaltsblock im DIV erstellt wird, ist DIV zusammen in dieser Art von Styling enthalten. Der Blockforminhalt wird erstellt, der erwähnt wird, um eine Anzeige zu bilden.

H3: Hover + div
Bildschirmsperre;

Schließen Sie danach die Stil- und Kopf -Tags. Deklarieren Sie eine Überschrift in den HTML -Körper. Es wird ein DIV gebildet. Der Text, der im Block erwähnt wird, ist auch in den Div -Tags geschrieben. Schließen Sie das Körpermarke.

HTML -Körpercode:

Speichern Sie den Code in der Datei und führen Sie ihn im Browser aus. Als Ausgabe des vorherigen Codes haben wir einen kleinen Teil des Videos genommen, um die Arbeit der Schwebeklasse zu erläutern, die erstellt und entwickelt wurde, um einen Block mit einem Text im Block zu erstellen.

Ausgang:
Video Playerhttps: // LinuxHint.com/wp-content/uploads/2022/06/Video3.MP400: 0000: 0000: 13use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.

Das Video zeigt, dass ein einfacher Text als Überschrift angezeigt wird, wenn wir die Datei im Browser ausführen. Aber wenn wir über den Text schweben, führt dies zu einer Änderung auf der Webseite. Bei schwebem Umzug bleibt der Text der Überschrift so wie zum Zeitpunkt der Ausführung derselbe. Aber jedes Mal, wenn wir den Cursor zur Überschrift bewegen, wird ein Block auf der linken Seite erstellt. Wenn wir den Cursor von der Überschrift entfernen, verschwindet der Block. Dies liegt daran, dass die Hover -Klasse einen Block und einen Text darin erstellt. Alle Auswirkungen auf den Block und den Text werden in CSS angewendet.

Abschluss

CSS -Schwebe ist eine Eigenschaft, die verwendet wird, um den HTML. Diese Funktion wird meistens verwendet, um über etwas zu informieren. In diesem Artikel haben wir die Arbeit einer Hover -Klasse erläutert und wie der HTML. Zu Beginn gaben wir einen kurzen Überblick über die Hover -Klasse. Wir haben die beiden grundlegenden Beispiele für den Schwebeffekt implementiert. Das erste Beispiel enthält den Effekt auf den vorhandenen Text, während das zweite Beispiel darum geht, eine zusätzliche Form zu zeigen, die in Richtung des vorhandenen Textes schwebt, während der vorhandene Text gleich bleibt.