index bilder body länkar visited div-taggen class hover menyer dreamweaver dreamweaver extensions flash gratis html editorer gratis templates css3 animation med css3 responsiv design Böcker om stylesheets Design för din blogg waybackmachine
är du nyfiken på hur din eller andra webbsidor såg ut förr? Prova waybackmachine>>>

hoover, ett användbart kommando för länkar i ditt stylesheet.

Du kan ganska enkelt lägga in kommandot hover när du vill visa besökaren att den kör muspekaren över en länk. Här kan du använda både färg och bilder. Här har vi lagt in en fusklänk före varje textavsnitt som ser ut så här <a href="#">och vi slutar alltså länken med </a>. Här börjar du med att efter starten för kommandot, här använder vi #ettnamn, skriva ett a direkt efter kommandot. Som #ettnamnpakommandot a{här kommer kommandon för hur cellen eller den länkade texten ser ut innan någon för en muspekare över}. För att sedan få fram effekten när muspekaren förs över länken skrivs a:hover så här #ettnamnpakommadot a:hover {här kommer kommandon för hur cellen eller den länkade texten ser ut efter någon för en muspekare över}

Några exempel på hur du kan skifta färg både i bakgrund och text med hover kommandot.

här har vi använt <!--start för kod-->#hoover1 a{ background-color:#FFFFFF; background-image:url(https://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }<!--slut för kod--> i css filen och id="hover1" i p taggen

För att få fram hoover effekten har jag, i nästa steg, använt <!--start för kod-->#hoover1 a:hover{ background-color:#0000FF; background-image:url(https://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#FF0000; font-size:large }<!--slut för kod--> i vår css fil som ger effekten när du för muspekaren över området som är länkat.

Och i denna <!--start för kod-->#hoover5 a{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i vår css fil samt id="hoover5" i min p tagg.

För att få fram effekten när du för muspekaren över länken har jag använt <!--start för kod-->#hoover5 a:hover{ background-color:#FFFFFF; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i css filen som ändrar bakgrundsfärgen till vit

Här har jag använt <!--start för kod-->#hoover7 a{ background-color:#000000; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}<!--slut för kod--> i vår css fil och id="hoover7" i p taggen

För att sedan ändra bakgrundsfärg och färgen på texten har jag skrivit <!--start för kod-->#hoover7 a:hover{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> efter i vår css fil. Lägg märke till a efter hoover7 och a:hoover i nästa kommando för att få fram effekten.

I vår CSS fil har vi alltså skrivit <!--start för kod-->#hoover1 a{ background-color:#FFFFFF; background-image:url(https://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }
#hoover1 a:hover{ background-color:#0000FF; background-image:url(https://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#FF0000; font-size:large }<!--slut för kod--> för den första med förändring av bakgrundsbild och färg på text.

Vi har skrivit <!--start för kod-->#hoover5 a{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}
#hoover5 a:hover{ background-color:#FFFFFF; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> För nästa där vi förändrar bakgrundsfärg från grått till vitt. Och <!--start för kod-->#hoover7 a{ background-color:#000000; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}
#hoover7 a:hover{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> Där vi ändrar från svart till vitt på bakgrundsfärg och tvärtom för text.

Som du ser i min första kommando kan du även ändra bakgrundsbild med hover

Det ordnar du med <!--start för kod-->#hoover9 a{background-color:#FFFFFF; background-image:url(https://www.webbgbg.se/webbdesign/blue/bild_som_bakgrund.jpg); background-repeat:no-repeat; font:Arial, Helvetica, sans-serif; color:#000000; }<!--slut för kod--> i css filen

För att sedan få fram effekten när du för muspekaren över länken skriver du <!--start för kod-->#hoover9 a:hover{background-color:#FFFFFF; background-image:url(https://www.webbgbg.se/webbdesign/blue/bakgrundsbild.jpg); background-repeat:no-repeat; font:Arial, Helvetica, sans-serif; color:#FFFFFF; }<!--slut för kod-->efter första kommandot Om vi använder en bild och repeterar denna med en lite annorlunda bakgrund får man denna effekt <!--start för kod-->#hoover11 a{background-color:#FFFFFF; background-image:url(https://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }<!--slut för kod-->

För att sedan få fram effekten när du för muspekaren över har vi efter det första kommandot lagt en #hoover11 a:hover sä här<!--start för kod-->#hoover11 a:hover{background-color:#000000; background-image:url(https://www.webbgbg.se/webbdesign/blue/bla_rund.gif); font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large }<!--slut kod-->