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?
- Wo wird Hover verwendet?
- Was macht Hover?
- Kompatibilität
- Wie funktioniert es?
- Bewegen Sie den Mauszeiger über die Hintergrundfarbe zu 'Rot'.
- Erstellen einer Schwebeopazität für Bilder
- Erstellen einer Textüberlagerung für Bilder
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.
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 angezeigtIm 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
,