CSS Obrázok dynamický efekt

fotografie prevráteniu sú užitočné nástroje na pomoc koncovým užívateľom sledovať ich myš cez vaše webové stránky . Webové stránky designer bude často zabaliť veľa podrobných informácií na stránke , a koncový užívateľ bude potrebovať vizuálne fronty , že jej myš prevalil something.There sú dva základné spôsoby , ako vytvoriť rollover . Môžete použiť na strane klienta , skriptovací jazyk s názvom JavaScript splniť úlohu , alebo môžete použiť kaskádové štýly ( CSS ) , splniť úlohu . Tento článok popisuje spôsob kaskádových štýlov . Vytváranie texte Rollover

Vytvoriť všeobecný XHTML dokument v textovom editore , ako je vidieť na obrázku .

* Zahrnúť DOCTYPE Transitional a vaše kódovanie tagy . * Uveďte názov značky medzi . tagy hlava * Vrátane tagy štýlu medzi značkami hlavy

medzi značky BODY , zadajte nasledovné slová : .

Tento text prevráteniu

uzavrite toto . veta sa rozpätie začiatok a koniec značky , ako je uvedené . Vnútri začiatku rozpätie značku , typ :

class = " rollover "

Nahrať dokument na webový server
Vytvorenie pravidla stylesheet
< . br >

Zadajte nasledujúci príkaz medzi tagy štýlu v hornej časti dokumentu :

span.rollover { background- color : white ; } rozpätie : hover.rollover { background- color : yellow ; farba : gaštanové ; }

Najprv vytvorte rozpätie rolovacie inštrukcie pre štýlov . Zadajte " rozpätie " , potom obdobie , potom " rollover " , kde prevrátenia zodpovedajúci atribút class , ktorý bol daný do tagu span . To hovorí , že pozadie medzi rozpätie značky je biela , ktorá vyzerá ako prázdny farbu pozadia pre koncového užívateľa .

Ďalej vytvorte rozpätie , a hrubého čreva , a obdobie , plus prevráteniu , čo je trieda značky rozpätie . Inštrukcie hover znamená " Keď umiestnite ukazovateľ myši nad text v tagu span , postupujte podľa nasledujúcich pokynov . " Ak koncový používateľ umiestni kurzor myši nad textom , pozadie sa zmení na žltú a text sa zmení gaštanové .
Vytvorenie tlačidla Presunúť

je relatívne jednoduchý spôsob , ako vytvoriť tlačidlo pekný z textu na webovej stránke . Stačí pridať nasledujúce atribúty výučby span.rollover :

background- color : navy ; border : 5px biela od samého začiatku ; font - family : Gruzínsko ; font -size : 14pt ; farba : biela ;

Po prvé , zmeniť farbu pozadia z bielej na námorníctvo . Ďalej pridajte hranice inštrukciu , ktorá má tri časti : border - width , border - color a atribúty border - style . Vybrali sme 5 - pixelov , biela , bez ďalšieho hranicu , čo znamená , že je biely , obdĺžnikový rámček hraničí obsah tagu span , ktorý je 5 pixelov silná .

Zmeniť rodinu písma Georgia na 14 bodov . Konečne , zmeniť farbu písma , aby biely , tak to ukazuje proti námorným pozadia . Pridať dokument na webový server a vyskúšať si to .
Pred Rollover

Toto je snímka z webovej stránky predtým , než umiestnite ukazovateľ myši cez text . Text je biely , a na pozadí je tmavo modrá .
Po prevrátení

Toto je snímka z webovej stránky , zatiaľ čo ukazovateľ myši je nad týmto tlačidlom . Pozadie je žltá , a text je gaštanová .

• Predchádzajúca strana: Ako opraviť Chyba syntaxe 
• Ďalšia strana: Aké sú CNC stroje