Bild rollovers är användbara verktyg för att hjälpa dina slutanvändare spåra sin mus över din webbsida . En webbplats designer kommer ofta packa en hel del detaljerad information på en sida , och slutanvändaren behöver en visuell kö att hennes mus har rullat över something.There finns två grundläggande sätt att skapa en rollover . Du kan använda klientsidan skriptspråk kallas JavaScript för att utföra uppgiften , eller du kan använda Cascading Style Sheets ( CSS ) för att utföra uppgiften . Denna artikel täcker Cascading Style Sheets metod . Skapa Text Rollover
Skapa ett generiskt XHTML-dokument i din textredigerare som syns i bilden . Inkludera DOCTYPE Transitional och dina taggar kodning .
* * Inkludera titel taggar mellan huvudet taggarna * Inkludera stil taggar mellan huvudet taggar
mellan body-taggarna skriver följande ord : . . .
detta är en text rollover
Bifoga detta meningen med span början och sluttaggar , som visas . Inne i början span-tagg , typ : .
Class = " rollover "
Ladda ditt dokument till webbservern Addera Skapa stilmallen Regler
Skriv följande mellan stil taggar längst upp i dokumentet :
span.rollover { background-color : white ; } span : hover.rollover { background- color : yellow ; färg : rödbrunt ; }
Först skapar instruktionen span rollover för formatmallen . Typ " span " och sedan en period , då " rollover " där rollover matchar attributet class som gavs till span-tagg . Där anges att bakgrunden mellan span-taggar är vitt , som ser ut som en tom bakgrundsfärg till slutanvändaren .
Nästa , skapa spannet , plus ett kolon , plus en period , plus välta , vilket är klassen av span-tagg . Den svävande instruktionen betyder " När du placerar muspekaren över texten i span -taggen , följ dessa instruktioner . " När slutanvändare placerar musen över texten , blir bakgrunden gul och texten vänder rödbrunt .
Skapa en knapp Rollover
p Det är ett relativt enkelt sätt att skapa en snygg knapp ur texten på din webbsida . Lägg bara till följande attribut till span.rollover instruktion :
bakgrundsfärg: navy , border : 5px vitt början , font -family : Georgia , font - size : 14 pt , färg : vit ;
Först , ändra bakgrundsfärgen från vit till marinen . Nästa , tillsätt gränsen instruktionen , som har tre delar : gränsen bredd , gränsa - färg och border - style attribut . Vi har valt en 5 - pixel , vit , inledningsvis gränsen , vilket innebär att det är en vit , rektangulär ruta gränsar innehållet i span-tagg som är 5 pixlar tjock .
Ändra teckensnitt familjen till Georgien på 14 pt . Slutligen , ändra teckensnitt färg till vitt , så det dyker upp mot marinblå bakgrund . Ladda upp dokumentet till din webbserver och testa det . Addera Innan Rollover
här är en ögonblicksbild av webbsidan innan du placerar muspekaren över texten . Texten är vita , och bakgrunden är marinblå .
Efter Rollover
här är en ögonblicksbild av webbsidan medan du håller muspekaren över knappen . Bakgrunden är gul , och texten är rödbrunt .
