Bild Rollover sind nützliche Werkzeuge bei der Unterstützung Ihrer Endnutzer verfolgen ihre Maus über Ihren Web -Seite. Ein Website-Designer wird oft packen viele detaillierte Informationen auf einer Seite , und der Endbenutzer wird eine visuelle Warteschlange , dass ihr mit der Maus hat sich im Laufe something.There gerollt gibt zwei grundlegende Möglichkeiten, um ein Rollover erstellen müssen . Sie können die Client-seitige Skriptsprache JavaScript , um die Aufgabe zu erfüllen , oder Sie können Cascading Style Sheets (CSS) verwenden, um die Aufgabe zu erfüllen. Dieser Artikel behandelt die Cascading Style Sheets Verfahren . Erstellen der Text Rollover

Ein generisches XHTML-Dokument in einem Texteditor wie im Bild zu sehen .

* Fügen Sie die DOCTYPE Transitional und Ihre Encoding -Tags. * Fügen Sie die Titel-Tags zwischen die Kopf-Tags * Fügen Sie die Style-Tags zwischen den Kopf-Tags

zwischen den Body-Tags geben Sie die folgenden Worte : . . .

Dies ist ein Text-Rollover

Legen Sie diese Satz mit der Spannweite Anfang und Ende -Tags , wie dargestellt. Innerhalb der Beginn span-Tag ein: Erstellen

class = " Rollover "

hochladen Ihrem Dokument auf Ihren Webserver
die Stylesheet -Regeln
< . br>

Geben Sie den folgenden zwischen den Stil-Tags am Anfang des Dokuments :

span.rollover {background- color: white; } Spannweite : hover.rollover {background-color : yellow ; Farbe : rotbraun ;}

erstellen Sie zunächst die Spanne Rollover Anweisung für das Stylesheet . Typ "span ", dann eine Zeit , dann " Rollover ", wo Rollover das class-Attribut passt , dass in der span-Tag gegeben . Diese besagt, dass der Hintergrund zwischen den span-Tags ist weiß, die aussieht wie eine leere Hintergrundfarbe auf den Endanwender .

Als Nächstes erstellen Sie die Spannweite sowie ein Doppelpunkt , sowie eine Frist , zzgl. Rollover , das ist die Klasse der span-Tag . Die Anweisung bedeutet hover " Wenn Sie den Mauszeiger über den Text legen im span-Tag , folgen Sie diesen Anweisungen . " Wenn die Endbenutzer Orte der Maus über den Text , der Hintergrund gelb wird und der Text wird rotbraun.
Button erstellen Rollover

Es ist ein relativ einfache Möglichkeit, eine gut aussehende Taste aus dem Text auf Ihrer Web -Seite zu erstellen . Fügen Sie einfach die folgenden Attribute zur span.rollover Anweisung :

background-color: navy ; border : 5px weiß vornherein ; font-family : Georgia ; font-size: 14pt ; color: white;
< p> Zunächst ändern Sie die Hintergrundfarbe von weiß auf navy . Anschließend fügen Sie den Rand Anweisung , die aus drei Teilen besteht : die border-width , die border-color und border-style -Attribute. Wir haben einen 5 -Pixel , weiß, Anfang Grenze gewählt , was bedeutet, dass es eine weiße, rechteckige Box grenzt an die Inhalte des span-Tag , die 5 Pixel dick ist.

Ändern der Schriftart Familie in Georgien bei 14 pt . Schließlich ändern Sie die Schriftart Farbe weiß, so zeigt sich, gegen die Marine Hintergrund. Laden Sie das Dokument auf Ihrem Web -Server und testen Sie es aus .
Vor dem Rollover

Dies ist eine Momentaufnahme der Web -Seite ist, bevor Sie mit dem Mauszeiger über den Text legen . Der Text ist weiß, und der Hintergrund ist dunkelblau .
Nach dem Rollover

Dies ist ein Überblick von der Web-Seite , während Sie den Mauszeiger über der Schaltfläche befindet . Der Hintergrund ist gelb, und der Text ist rotbraun.