CSS Image Rollover-Effekt

August 27

Rollover sind nützliche Werkzeuge, die helfen, Ihre Endbenutzer ihre Maus über Ihre Webseite zu verfolgen. Ein Website-Designer wird oft viele detaillierte Informationen auf einer Seite packen, und der Endbenutzer benötigen eine visuelle Warteschlange, die ihre Maus über etwas gerollt ist.

Es gibt zwei grundlegende Möglichkeiten, eine Rollover erstellen. Die clientseitige Skriptsprache namens JavaScript können Sie die Aufgabe erfüllen, oder können Sie Cascading Style Sheets (CSS) zum Ausführen der Aufgabe. Dieser Artikel behandelt die Cascading Style Sheets-Methode.

Die Text-Rollover erstellen

CSS Image Rollover-Effekt

Erstellen Sie ein generisches XHTML-Dokument in Ihrem Texteditor wie im Bild zu sehen.

Gehören Sie dem DOCTYPE Transitional und Ihre Codierung Tags. Enthalten Sie der Titel-Tags zwischen den Head-Tags. Enthalten Sie die Style-Tags zwischen den Head-Tags. Zwischen den Body-Tags geben Sie die folgenden Wörter:

Dies ist ein Text-Rollover.

Schließen Sie diesen Satz mit dem Span Anfang und Ende-Tags, wie gezeigt. Geben Sie das Beginn-Span-Tag:

Klasse = "Rollover"

Laden Sie Ihr Dokument auf Ihren Webserver.

Erstellen von Stylesheet-Regeln

CSS Image Rollover-Effekt

Zwischen den Style-Tags am Anfang des Dokuments Folgendes ein:

span.Rollover {Background-Farbe: white;}span:hover.Rollover {Hintergrund-Farbe: gelb, Farbe: braun;}

Erstellen Sie zunächst die Span-Element Rollover-Anweisung für das Stylesheet. Geben Sie "span," dann einen Zeitraum, dann "Rollover" bei Rollover des Class-Attributs übereinstimmt, die das Span-Tag gegeben wurde. Dies besagt, dass der Hintergrund zwischen den Span-Tags weiß, die aussieht wie eine leere Hintergrundfarbe für den Endnutzer.

Erstellen Sie anschließend das Span, plus einen Doppelpunkt sowie eine Periode plus Rollover, die die Klasse der Span-Tag ist. Die Hover-Anweisung bedeutet "Wenn Sie den Mauszeiger über den Text innerhalb der Span-Tag platzieren, diese Anweisungen befolgen." Wenn der Endbenutzer die Maus über den Text platziert, wird Hintergrund Gelb und die Text-runden-kastanienbraun.

Erstellen eine Rollover Button

CSS Image Rollover-Effekt

Es gibt eine relativ einfache Weise eine hübsche Schaltfläche aus dem Text auf Ihrer Webseite zu erstellen. Fügen Sie einfach die folgenden Attribute, um die span.rollover-Anweisung:

Hintergrund-Farbe: Marine; Border: 5px weißen Anfang an; Schriftfamilie: Georgien; Schriftgröße: 14pt;Farbe: weiß;

Als erstes ändern der Hintergrundfarbe von weiß navy. Fügen Sie anschließend die Grenze-Anweisung, die aus drei Teilen besteht: die Rahmenbreite, die Rahmenfarbe und die Rahmenart Attribute. Wir haben uns entschieden mit 5 Pixel, white, Anfang an Rahmen, d.h. es ist eine weiße, rechteckige Box, angrenzend an den Inhalt des Span-Tag, das dicken 5 Pixel beträgt.

Ändern Sie die Schriftfamilie in Georgien am 14 pt. Schließlich ändern Sie die Schriftfarbe auf weiß, so es sich die Marine Hintergrund zeigt. Hochladen Sie das Dokument auf Ihren Webserver und testen Sie es aus.

Vor der Rollover

CSS Image Rollover-Effekt

Dies ist ein Schnappschuss der Webseite, bevor Sie den Mauszeiger über den Text platzieren. Der Text ist weiß und der Hintergrund ist dunkelblau.

Nach der Rollover

CSS Image Rollover-Effekt

Dies ist ein Schnappschuss der Webseite, während Sie den Mauszeiger über der Schaltfläche befindet. Der Hintergrund ist gelb, und der Text ist kastanienbraun.