Hover Effekter Med CSS
Sådan styrker du dit design med hover-effekter i CSS.
Edited: 2020-09-26 08:08
For at gøre et design mere interessant kan man tilføje hovereffekter til links og knapper på en side. Det fungere også på andre elementer — men det er mest almindeligt på links og knapper. Effekterne bidrager til det overordnede udtryk i et design, og det er derfor vigtigt, at man tager sig god tid til at vælge en effektiv og tilgængelig stil.
Med effektiv og tilgængelig stil menes der, at hvis links skifter baggrund eller tekst-farve, så skal det ske sådan, at dette ikke forringer læsbarheden af teksten nævneværdigt. Nu bruger vi tekst-links som eksempler, men man bør gøre samme overvejelser med billeder og symboler. Det må altså ikke gå udover brugervenligheden.
De forskellige stadier, eksempelvis når musen føres over, eller udseendet på besøgte og aktive links, kan alle styres med de såkaldte pseudo-classes. Når vi styler hyperlinks er det vigtigt, at vi anbringer vores angivelser i den rigtige rækkefølge for at undgå, at de overskriver hinanden. Den rigtige rækkefølge er vist nedenfor:
a:link {color: blue;}
a:visited {color: blue;}
a:hover {color: red;}
a:active {color: red;}
Rækkefølgen på link, visited, hover og active
Et besøgt link (visited) kan både være besøgt og aktivt (active) på samme tid, og der kan derfor opstå en konflikt der gør, at din hover angivelse ikke får indflydelse, hvis ikke du bruger dem i den rigtige rækkefølge. En forkert rækkefølge, som illustrere dette problem, vil være med active og visited byttet om:
a:link {color: blue;}
a:active {color: red;}
a:hover {color: red;}
a:visited {color: red;}
En måde man kan huske rækkefølgen på, er ved at remse den op for sig selv: "link-visited-hover-active". Eller man kan huske bogstaverne "LVHA". Alternativt kan man også bare slå det op, når man skal bruge det. Men det er måske i virkeligheden nemmere at overveje hvordan de enkelte klasser fungere, og derved huske at "visited" helst skal komme før hover, fordi den nettop kan befinde sig i flere stadier på en gang.
Brugen af hover på andre elementer
Det er også muligt at bruge hover på andre elementer. Det vil man eksempelvis gøre, hvis man laver knapper som aktivere noget JavaScript med onClick() på en side. Man kan også bruge det som en effekt uden at man laver knapper.
Når man laver knapper med hover, så vil man ofte også angive en cursor:pointer; for at ændre musepilen til en hånd. Det er noget som sker automatisk for links, men når man bruger andre elementer end a, så skal man altså selv angive det.
Inden man bruger et div, eller andet element, bør man overveje om ikke button er et bedre egnet element.
For at style andre elementer med hover, kan man gøre som vist nedenfor:
div:hover {
color:red;
cursor:pointer;
}
Det kan være en god idé, at være specifik når man bruger pseudo-classes, fordi man ellers hurtigt kan komme til, at overskrive tidligere, mere bredt formuleret angivelser. For at være mere specifik kan man enten bruge klasser eller id'er på sine elementer. Eller man kan målrette bestemte elementer, som ligger inden i andre elementer.
/* Ved brug af klasser */
.button {background:silver;}
.button:hover {
color:red;
background:gray;
cursor:pointer;
}
/* Ved brug af id'er */
#unikt_id {background:silver;}
#unikt_id:hover { /* ... */ }
Det anbefales, at man bruger klasser eller id'er for at undgå konflikter med andre angivelser. Alternativt kan man også målrette elementer, som ligger inden i andre elementer. Eksempelvis button elementer placeret i article elementer som vist nedenfor:
article button {
/* Målrettet alle "button" elementer i "article" elementer på en side. */
}
Det kan dog hurtigt blive uoverskueligt på større sider, og der kan derfor nemt opstå konflikter som gør, at nogle af hover effekterne ikke vil virke.
Fortæl os hvad du tænker: