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}. Att använda denna typ av stylesheets är väldigt användbart när det gäller menyer. Om du ändrar bakgrundsfärg eller texten på färgen när besökaren för muspekaren över länken ser besökaren att här händer någonting. Vi har lagt en mall med kod du kan titta på här>>>
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(http://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 td taggen |
| För att få fram hoover effekten har vi i nästa steg använt <!--start för kod-->#hoover1 a:hover{ background-color:#0000FF; background-image:url(http://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 vår td tagg till denna cellen. |
| För att få fram effekten när du för muspekaren över länken har vi 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 vi 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 td taggen |
| För att sedan ändra bakgrundsfärg och färgen på texten har vi 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(http://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(http://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 vårt 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(http://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(http://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(http://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(http://www.webbgbg.se/webbdesign/blue/bla_rund.gif); font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large }<!--slut kod-->
Vi har lagt en mall med kod du kan titta på här>>> |
| | |
användbara länkar där du kan läsa mer |
cssdrive.com
tips på stylesheets med exempel på slutliga resultatet |
cssimport.com
En sida som ger inspiration |
alistapart.com
Här hittar du mycket att sätta händerna i |
codeproject.com
har många sidor med stylesheets och exempel. |
|
| | |