Klasse Auf Hover-Javascript Hinzufügen

Michael Zippo 04.11.2021

Der CSS: Hover-Selektor wählt ein Element aus, wenn Sie mit dem Cursor über dieses Element fahren. Zum Beispiel können Sie Folgendes verwenden: Hover, um die Farbe eines Links zu ändern, wenn Sie den Mauszeiger über den Link bewegen

Sie können Stile übertragen, die auf ein Element Ihrer Webseite angewendet werden, wenn die. . Benutzer bewegt den Mauszeiger auf dieses Element

hier ist der CSS-Selektor verfügbar in: Hover. Die: Hover-Auswahl ermöglicht es Ihnen, Elemente auszuwählen, während Sie darüber schweben. Dadurch können Sie Stile anwenden, wenn Sie mit der Maus über das

Element fahren. In diesem Tutorial werden anhand von Beispielen die Grundlagen von Selektoren in CSS und die Verwendung des CSS-Selektors erläutert. Schwebender Flug. Am Ende dieses Tutorials sind Sie ein Experte in der Auswahl von Stilelementen mit:. Hover

CSS-Selektoren

In CSS werden Selektoren verwendet, um HTML-Elemente auszuwählen, die Sie auf einer Webseite gestalten möchten. Mit Selektoren können Sie Elemente basierend auf ihrer ID, Klasse, Gruppe oder Attributen auswählen, sodass Sie bestimmte Stile auf bestimmte Elemente anwenden können.

Nehmen Sie beispielsweise an, Sie möchten alle

-Tags in einer HTML-Dokumente werden mit einem hellrosa Hintergrund angezeigt. Sie können dies mit diesem Code tun:

In diesem Code verwenden wir den

-Selektor, der alle

-Tags auf der Webseite auswählt. Als Nächstes geben wir in geschweiften Klammern den Stil an, den wir auf das

-Tag auf der Webseite

CSS-Selektor: anwenden möchten. Hover

Der CSS-Selektor: Hover wählt ein Element aus, wenn Sie mit der Maus über das Element fahren.: Hover kann für jedes CSS-Element verwendet werden, wird jedoch häufig für Links verwendet.: Hover wird nach dem Namen von angegeben das Element, das Sie auswählen möchten, zum Beispiel a: Hover for a link

Es gibt eine Vielzahl von Szenarien, in denen Sie verwenden können der Selektor: schweben. Hier sind einige mögliche Anwendungsfälle für den Selektor:.

Ändern der Textfarbe, wenn der Mauszeiger über eine Textzeile bewegt wird
Ändern der Größe eines Bilds, wenn der Benutzer den Mauszeiger darüber bewegt Bewegen Sie die Maus über das Bild.
Ändern Sie die Farbe einer Schaltfläche, wenn die Maus über die Schaltfläche bewegt wird.

In all diesen Anwendungsfällen wird ein bestimmter Stil angewendet, wenn der Benutzer bewegt die Maus mit dem Cursor über ein Element

Selektorsyntax: im Flug stationär ist:

Hier sind die wichtigsten Bestandteile der Syntax: hover:

selector ist die Anzahl der Elemente, auf die der Selektor angewendet wird: hover Wenn Sie also möchten, dass der: Hover-Effekt immer ausgelöst wird Hovert ein Benutzer auf ein
Element, muss h3 angegeben werden.
: hover teilt dem Browser mit, dass die Stile in der CSS-Regel sein sollen nur angewendet werden, wenn der Benutzer mit der Maus über ein bestimmtes Element fährt. Dieses Element wird durch die Auswahl .
CSS-Regeln sind die s Typen, die angewendet werden sollen, wenn der Benutzer die Maus über die Elemente bewegt, die durch den Selektor definiert sind. Beispielsweise können Sie die Schriftgröße für den Text oder die Hintergrundfarbe eines
Klick Button im Code-Editor oben, um die Ausgabe unseres HTML zu sehen / CSS-Code
Lassen Sie uns unseren Code analysieren
In unserer HTML-Datei definieren wir mithilfe eines -Tags einen Link zur Karma-Karriere-Homepage, also in unserem CSS-Code , definieren wir zwei Regeln.
Die erste Regel gilt für alle HTML -Tags auf unserer Webseite die Textfarbe aller hellgrünen Tags mit der Eigenschaft color

Die zweite Regel ändert die Farbe eines -Tags auf der Webseite in Orange, wenn die Maus über das -Tag fährt. Dies geschieht mit dem Selektor: Hover.

Wenn Sie also den Mauszeiger auf dem Text der Karma-Karriere-Startseite darüber bewegen, ändert sich die Farbe der Bindung zu Orange

Hover-Effekt CSS:. einen Textblock anzeigen

der Selektor: Hover kann auch verwendet werden, um einen Textblock anzuzeigen, wenn die Maus über einer Textzeile darüber schwebt

Angenommen, wir entwerfen eine FAQ Seite für die Karriereseite von Karma . . Wenn der Benutzer die Maus über eine Frage bewegt, sollte ein Textblock mit der Antwort auf seine Frage erscheinen. Wir könnten eine Beispielfrage mit diesem Code erstellen:

Auto eer Karma ist eine Gemeinschaft von Kollegen, Mentoren und Coaches, die Ihnen dabei helfen, Ihre Traumkarriere im technischen Bereich zu erreichen