CSS Bild rollover-effekt

June 9

Bildrullningar är användbara verktyg i att hjälpa dina slutanvändare spåra deras musen över din webbsida. En webbplats designer kommer ofta packa en hel del information på en sida, och slutanvändaren kommer att behöva en visuell kö att hennes mus har rullat över något.

Det finns två grundläggande sätt att skapa en rollover. Du kan använda klientsidan skriptspråk som kallas JavaScript för att utföra uppgiften, eller så kan du använda Cascading Style Sheets (CSS) för att utföra uppgiften. Denna artikel täcker Cascading Style Sheets metod.

Skapa textRollOver

CSS Bild rollover-effekt


Skapa en generisk XHTML-dokument i din textredigerare som syns i bilden.

Inkludera DOCTYPE Transitional och din kodning tags.Include titeln taggar mellan chefen tags.Include stil taggar mellan huvudet taggar.

Mellan body-taggarna, skriver följande ord:

Detta är en text välta.

Bifoga denna mening med span start- och sluttaggar, som visas. Inne i början span-tagg, typ:

class = "rollover"

Ladda upp dokumentet till din webbserver.

Skapa formatregler

CSS Bild rollover-effekt


Skriv följande mellan stil taggar överst i dokumentet:

span.rollover {background-color: vit;}
span: hover.rollover {background-color: gul; färg: rödbrun;}

Först skapar span välta instruktion för formatmallen. Skriv "span" och sedan en period, då "rollover", där rollover matchar klassen attribut som gavs till span-tagg. Där sägs att bakgrunden mellan span-taggar är vit, som ser ut som en tom bakgrundsfärg till slutanvändaren.

Därefter skapar span, plus ett kolon, plus en period, plus rollover, som är den klass av span-tagg. Hover instruktion betyder "När du placerar muspekaren över texten i span-tagg, följa dessa instruktioner." När slutanvändaren placerar musen över texten, visar bakgrunden gult och texten vänder rödbrun.

Skapa en knapp Rollover

CSS Bild rollover-effekt


Det är ett relativt enkelt sätt att skapa en snygg knapp ur texten på webbsidan. Bara lägga till följande attribut till span.rollover instruktion:

bakgrundsfärg: marin; gräns: 5px vit början; font-family: Georgia; font-size: 14 pt;
färg: vit;

Först ändra bakgrundsfärgen från vit till marinen. Därefter tillgräns instruktion, som består av tre delar: gränsen bredd, gränsen färger och gräns stil attribut. Vi har valt en 5-pixel, vit, inledningsvis gräns, vilket innebär att det är en vit, rektangulär låda som gränsar till innehållet i span-tagg som är 5 pixlar tjock.

Ändra typsnittet till Georgien på 14 pt. Slutligen, ändra typsnitt färg till vitt, så det dyker upp mot marinbakgrund. Överför dokumentet till din webbserver och testa det.

Innan Rollover

CSS Bild rollover-effekt


Detta är en ögonblicksbild av webbsidan innan du placerar muspekaren över texten. Texten är vit, och bakgrunden är marinblått.

Efter Rollover

CSS Bild rollover-effekt


Detta är en ögonblicksbild av webbsidan medan muspekaren är över knappen. Bakgrunden är gul, och texten är rödbrun.


        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2019 Astrixsoft.com | Contact us: webmaster# astrixsoft.com