So setzen Sie Ahover basierend auf dem Unterricht

“:schweben”Ist eine der beliebtesten Pseudoklasse, die verwendet wird, um jedem Element auf Maus oder Cursor Effekte zu verleihen. Es ist nur im CSS -Stilblatt erkannt, was bedeutet, dass es nicht in Inline -CSS angewendet werden kann. Um „: schweben“ auf das Element anzuwenden, ist es besser, dem Element die Klasse- oder ID.

Dieses Tutorial erklärt:

• Was ist "a: schweben" in CSS?
• So setzen Sie "A: Hover" basierend auf der Klasse?

Was ist "a: schweben" in CSS?

“A: Schwebe”Wird verwendet, um einen Schwebeffekt auf die Einbettungsverbindungen oder das Anker -Tag hinzuzufügen. Hier enthält „A: Hover“ Anchor -Tags “Und ": schwebe" Pseudoklasse. Es wird im Allgemeinen verwendet, um das „“ Element in CSS auszulösen. Es kann auch Effekte zum „A“ -Element verleihen, indem es die Linkfarbe, den Cursorstil, die Hintergrundfarbe und viele mehr verändert.

So setzen Sie "A: Hover" basierend auf der Klasse?

Setzen “A: SchwebeProbieren Sie die angegebenen Anweisungen aus.

Schritt 1: Machen Sie einen Div -Container

Erstellen Sie zunächst einen Container mit Hilfe des “"Tag und zuweisen Sie es" ein "Ausweis”Attribut.

Schritt 2: Erstellen Sie einen weiteren „DIV“ -Container

Als nächstes erstellen Sie eine verschachtelte “divContainer zwischen dem ersten Container und zuweisen Sie eine “Klasse”Attribut mit einem bestimmten Namen.

Schritt 3: Fügen Sie "” -Tag ein

NächstTag, das zum Verknüpfen einer Seite mit einer anderen verwendet wird. Fügen Sie dann das erwähnte Attribut in das "" "Öffnungsetik" ein, wobei:

• “Klasse”Wird verwendet, um das Element eindeutig mit einem Namen zu identifizieren.
• “hrefDas Attribut wird verwendet, um die URL anderer Seite oder Zieladresse zu halten:

Hauptseite
Heim
über mich

Die Ausgabe des obigen Codes lautet wie folgt:

Schritt 4: Stylen Sie den Haupt „Div“ Container

Um den Hauptbehälter „Div“ zu stylen, greifen Sie zunächst auf die “zu"”Element nach ID -Namen mit dem“#”Selektor. In unserem Fall haben wir benutzt “#Main-Div”. Wenden Sie als Nächstes die folgenden Eigenschaften an:

#Main-div
Grenze: 3px fest blau;
Rand: 20px 50px;
Polsterung: 50px;
Schriftgröße: größer;
Hintergrundfarbe: Bisque;

Hier:

• Der "GrenzeEigenschaft wird verwendet, um eine Grenze oder Umrisse um das Element zu definieren.
• “Rand”Zuweist einen Raum außerhalb der definierten Grenze.
• “Polsterung”Wird verwendet, um den Raum innerhalb der definierten Grenze und um den Inhalt des Elements anzugeben.
• “Schriftgröße”Eigenschaft bestimmt die Größe der Schriftart.
• “Hintergrundfarbe”Wird verwendet, um die Farbe auf der Rückseite des Elements innerhalb einer Grenze einzustellen.

Ausgang

Schritt 5: Setzen Sie "A: Hover" basierend auf der Klasse

Zugang nun auf die Innere “div"Element verwendet die zugewiesene Klasse mit Punktauswahl".Hauptmenü"Und nutzen Sie das"A: SchwebePseudoklasse, um dem "einen Schwebeeffekt hinzuzufügen"" Element.

Wenden Sie zu diesem Zweck die genannten Eigenschaften an:

.Hauptmänner A: Hover
Farbe: RGB (247, 137, 12);
Grenze: 2px gepunktet blau;
Grenzradius: 20%;

Hier ist die Beschreibung für den oben genannten Code:

• “FarbeDie Eigenschaft wird verwendet, um die Farbe des Textes festzulegen.
• “Grenze"Definiert eine Grenze um die"" Element. Zum Beispiel haben wir einen gepunkteten blauen Rand auf Schwebeplätze angewendet.
• “Grenzradius”Legt die Elementkanten in einer abgerundeten Form fest:

Das drehte sich nur darum.

Abschluss

Das festlegen "A: Schwebe"Pseudo-Klasse basierend auf der Klasse, erstellen Sie zunächst einen DIV-Container mit der"”Tag und zuweisen Sie es ein Klassenattribut. Dann einfügen eine “Element zum Verknüpfen einer anderen Webseite. Greifen Sie danach mit Hilfe der Klasse auf das „DIV“ -Element zu und wenden Sie den Schwebeffekt auf den Link mit „A: Hover“ an. Dieser Beitrag hat die Methode zum Festlegen des „A: Hover“ basierend auf der Klasse demonstriert.