En Hover-effekt är när muspekaren placeras över en bild, text, länk, DIV eller annat objekt och statusen ändras för objektet. Hover-effekter kallas ibland också för OnMouseOver eller Rollover och tidigare användes Javascript.
I exemplen nedan används CSS och pseudo-classen :HOVER för att ange vad som ska ske när muspekaren förs över ett objekt.
Elementet OPACITY används för att ange om ett objekt ska vara synligt eller inte i startläget.
Exempel1 visar en DIV med text och tonar ned visningen av bilden.
Exempel 2 visar en heltäckande DIV med text över bilden.
En hover-bild visas och både startbilden och hover-bilden tonas in/ut.
En hover-bild med text visas och både startbilden och hover-bilden med texter tonas in/ut.
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!
Du kan beställa tjänsten WDS medlem här »
Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!