So implementieren Sie Hover in CSS anhand von Beispielen

In diesem Artikel erhalten Sie detaillierte und umfassende Kenntnisse zur Implementierung von Hover in CSS anhand von Beispielen.

Cascading Style Sheets (CSS) werden mit dem erstellt oder XML-Format (einschließlich XHTML, SVG). Es handelt sich um eine Stylesheet-Sprache, die hauptsächlich zur Beschreibung von Elementen durch eine Vielzahl von Formatierungsmethoden verwendet wird. Eine der Methoden ist das Schweben. In diesem Artikel wird das Schweben in CSS folgendermaßen verstanden:

Was ist Hover in CSS?

CSS-Hover ist eine Auswahlkomponente, mit der verschiedene Elemente formatiert werden, wenn der Mauszeiger darüber bewegt wird. Sie können für fast jedes HTML-Element verwendet werden. Die Hover-Funktion in CSS spielt beim Entwerfen von Webseiten eine wichtige Rolle.



Bewegen Sie den Mauszeiger in CSS

Die Hover-Komponente kann Webseiten nach Benutzerwunsch in einem kompakten und effektiven Webdesign-Programm hervorheben, codieren und anpassen.

Wo wird Hover verwendet?

Die häufigsten Beispiele für die Funktionsfähigkeit der Hover-Funktion können auf wichtigen Shopping-Websites wie Flipkart und Amazon hervorgehoben werden. Wenn Benutzer mit einem Mauszeiger über ein Produkt auf diesen E-Commerce-Websites fahren, ist das Produkt so programmiert, dass es eine automatische Zoom-Schwebefunktion ausführt, um dem Kunden eine bessere Sicht auf die ausgewählten Produkte zu bieten. Durch diese Programmierung wird die Webseite so gestaltet, dass eine kompakte Ansicht der gesamten Produktpalette zusammen mit einer detaillierten Ansicht des interessierenden Produkts in einem einzelnen Webseiten-Design angezeigt wird.

Was macht Hover?

Der Hover ist ein multifunktionales Programmierwerkzeug, mit dem der Benutzer das Zielelement mit einer endlosen Anzahl von Formatierungskriterien anpassen kann. Einige Beispiele für das betriebliche Know-how der Hover-Funktion sind:

  • Ändern der Hintergrund- / Schriftfarbe
  • Einbetten von verstecktem Text, der beim Schweben angezeigt wird
  • Erstellen Sie Rollover-Effekte für Bilder
  • Automatischer Zoom auf Text / Bilder
  • Ändern Sie die Bildopazität
  • Texteinbettung
  • Bildtausch
  • Div. Schweben
  • Mehrere andere CSS-Hover-Formatierungsvorgänge.

Der Hover-Effekt ändert im Wesentlichen den Eigenschaftswert eines Elements, um Änderungen an einem angegebenen Text / Bild oder den jeweiligen Elementen zu animieren. Die Einbettung von CSS-Hover-Elementen in ein Webseiten-Design verwandelt eine normale Webseite in eine interaktive, robuste und hochfunktionale Webseite. Diese Webseiten-Designs sind benutzerfreundlich und umfassend. Von Hover gestaltete Webseiten haben eine höhere Attraktivität für den Verbraucher und lenken die Aufmerksamkeit potenzieller Kunden auf sich.

Was ist eine Javascript-Methode

Kompatibilität von Hover in CSS

Die Hover-Funktion ist mit allen gängigen Webbrowsern kompatibel. Die Implementierung dieses Elements auf Touch-Geräten ist jedoch immer noch eine herausfordernde Aufgabe. Der Hover in CSS ermöglicht den Zugriff auf Inhalte auf Geräten, die keine Hover-Funktionen unterstützen. Es wurde beobachtet, dass eine aktivierte Schwebefunktion auf dem nicht unterstützenden Gerät auf dem Gerät hängen bleiben kann.

Folglich wird die wichtige Anzeige wichtiger Inhalte durch das Formatierungsproblem blockiert. Einerseits, wo das Hover-Element im CSS-Programm ein hohes Maß an effizienter Personalisierung für Webseiten bewirkt, ist seine Funktionsfähigkeit auf Mobilgeräten in hohem Maße inaktiv. Angesichts der Umstände, unter denen die Welt der Informationstechnologie erheblich mobiler wird, besteht die Gefahr, dass die Schwebefunktion mit dem technologischen Fortschritt überholt wird. Daher ist die Notwendigkeit, eine tragbare eingebettete Funktion herzustellen, die mit Touch- und Mobilgeräten funktioniert, äußerst wichtig.

Wie funktioniert Hover in CSS?

Der aktive Pseudoklassenstil ist bei der CSS-Hover-Formatierung dominant und überschreibt alle nachfolgenden Verknüpfungen, denen diese Pseudoklasse folgt. Zum Beispiel in der Pseudoklasse “: link: visit oder: active muss die: hover-Regel nach: link und: visit, aber vor: active für ein geeignetes: Hover-Styling platziert werden. Die LVHA-Reihenfolge :: link ,: schweben ,: besucht und: aktiv wird als Referenz für den richtigen Formatierungsstil: Schweben verwendet.

div {Hintergrundfarbe: grün Polsterung: 18px Anzeige: keine} span: hover + div {Anzeige: Block}Schwebetest!Versteckter Code wird beim Hover angezeigt

Im obigen Code wird das span-Element so geändert, dass das Hover- und das div-Element unter Verwendung des span: hover + div-Elements zusammengeführt werden. Das span-Element, das auf der primären Landing-Webseite angezeigt wird, zeigt den Text 'Hover-Test!' Wenn Sie den Mauszeiger weiter über das span-Element bewegen, wird das div-Element 'Versteckter Code wird beim Schweben angezeigt' angezeigt. Dieses Einbettungsformat gilt sowohl für Text als auch für Bilder.

Bewegen Sie den Mauszeiger über die Hintergrundfarbe zu 'Rot'.

p: hover, h1: hover, a: hover {Hintergrundfarbe: Rot}

Hover Red

Hover Red

Links:

Schwebetest Rot:

Google com

Hinweis: Hallo

Der obige Code passt das an

,

und Element und integriert sie in eine gemeinsame Schwebefunktion. Dieser Code soll die Textfarbe in Rot ändern, wenn der Mauszeiger darüber bewegt wird. Die Komponenten h1 und h2 zeigen 'CSS: Hover Test Code' bzw. 'Hover Red' an. Das Absatzelement: Hover Test Red und Ankertag: google.com wird rot hervorgehoben, wenn der Mauszeiger darüber bewegt wird.

Erstellen einer Schwebeopazität für Bilder

.pic {Breite: 1900px Höhe: 1900px Deckkraft: 1 Filter: Alpha (Deckkraft = 100) Hintergrund: URL (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {Deckkraft: 0,2 Filter: Alpha (Deckkraft = 30)}

Das obige CSS-Programm zeigt die Änderung der Deckkraft eines Bildes beim Schweben an. Die ursprüngliche Deckkraft des Bildes beträgt ein Unter Verwendung des Opazitätsschwebefilters wurde dieser jedoch auf 0,2 geändert. Dieser Code zeigt an, dass durch Verwendung des Hover-Elements die Deckkraft eines Bildes und / oder Textes geändert werden kann.

Erstellen einer Textüberlagerung für Bilder

.pic {Breite: 4000px Höhe: 2170px Hintergrund: URL (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {Breite: 3400px Höhe: 2170px Hintergrund: #FFF Deckkraft: 0} .pic: hover .text {Deckkraft: 0,6 Textausrichtung: Farbe rechtfertigen: # 000000 Schriftgröße: 20px Schriftgröße: 700 Schriftfamilie: 'Times New Roman', Times, Serifenauffüllung: 30px} Orange ist eine Faser reiche Frucht. Die in einer Orange enthaltenen Antioxidantien können die Verdauung unterstützen, die Haut zum Leuchten bringen und als Anti-Aging-Element wirken.

Die Textebene in CSS Hover ist ein effizientes Werkzeug, um den beschreibenden Text des Bildes in das Bild selbst einzubetten. Dieses Tool bietet einen kompakten Überblick über das Bild, ohne auf engstem Raum für das Webdesign ruhenden Speicherplatz zu beanspruchen. In diesem Code ist das Hintergrundbild mit einem beschreibenden Text eingebettet, der angezeigt wird, wenn sich der Mauszeiger über dem Text befindet.



Damit sind alle wichtigen Aspekte von Hover in CSS abgeschlossen und die Benutzerfreundlichkeit in der Webentwicklung hervorgehoben. Es gibt viele Spezialeffekte, die es auf unsere Webseiten bringen kann. Wir können immer verschiedene Kombinationen des Hover-Selektors mit anderen CSS-Eigenschaften wie Animation, Hintergrundbildern, Hyperlinks usw. ausprobieren und dessen Potenzial untersuchen, wie wir in einigen unserer Beispiele gesehen haben. Schließlich ist CSS eine der leistungsstärksten Methoden zum Entwerfen und Transformieren von Webseiten. Daher steht es Webentwicklern unmittelbar bevor, diese Fähigkeit zu erwerben, um dynamische Webseiten zu erstellen.

Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.

Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs „Hover in CSS“ und wir werden uns bei Ihnen melden.